echarts X,Y轴怎么设置标题

echarts X,Y轴怎么设置标题,第1张

设置标题的代码如下:

// 横轴属性

xAxis: [

{

type: 'category',

show: true,     //显示横轴false-不显示,true-显示

data: ['A', 'B', 'C'],

name:'名字'  //横轴标题

}

],

// 纵轴属性

yAxis: [

{

type: 'value',

show: true,    //显示纵轴false-不显示,true-显示

name:'名字'   //纵轴标题

}

],

扩展资料:

ECharts缘起公司自身的业务需求,但开源使得它得以发展,虽然业界已经有多如牛毛的JS图表库,但ECharts带着颠覆性的功能设计和技术特征,发布后得到了业界高度关注和好评,迅速成为国内数据可视化领域的“后起之秀”,先后在CSDN、ITEye、InfoQ、中国统计网、统计之都等主流技术媒体上有专题报道,被开源中国收录后即被列为精选推荐。

github上发布18个月后star数超过了5000,不仅成为了国内关注度最高的开源项目,我们还是中国第一个也是目前唯一一个入选了Github Explorer Data Visualization板块的开源项目。被百度外数百家企业应用在新闻传媒、证券金融、电子商务、旅游酒店、天气地理、视频游戏、电力等众多领域。

参考资料:ECharts-参考手册

1、主标题与副标题无法放置不同的位置

          根据官方文档设置title.align为left或者title.subtextStyle.align为left均无效

          方法一:加一个div使用绝对定位存放副标题

          方法二:使用伪元素绝对定位存放副标题

2、饼图的series列表下的label即在外部显示又在内部显示

        方法一:设置两个div存放两个数据一样的饼图,第一个div渲染饼图的series[0].label设置为"{formatter: '{d}%'}",第二个div渲染饼图的series[0].label设置为"{formatter: '{c}个', position: 'inner', color: 'white'}",注意第二个div覆盖显示在第一div的上面。

        方法二:div渲染饼图的series[0].label设置为"{formatter: '{d}%'}", series[1].label设置为"{formatter: '{c}个', position: 'inner', color: 'white'}",同时series[0]的其它数据和series[1]的其它数据一致,series[0].label的内容可以和series[0]互换。

3、series存在多个,默认情况下legend的样式按series[0]为准

        series[0]没有设置样式,series[1].itemStyle.normal自定义样式,最终效果如上图

4、y轴文字左对齐

       柱体设置弧度可以通过设置series[0].itemStyle.normal.barBorderRadius为[0, 5, 5, 0],数字代表弧度,数组顺序代表柱体顺时针左上,右上,右下,左下

        文字左对齐可以设置yAxis.axisLabel.textStyle.align为left,此时的y轴的文字将出现在柱体里

         yAxis.axisLabel.textStyle.margin可以用来设置yAxis和grid的间隔

        可以看到柱状图没有填满整个div,可以设置grid.left的值为负值来填满div


欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/tougao/11079750.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-13
下一篇 2023-05-13

发表评论

登录后才能评论

评论列表(0条)

保存