有人说,不就是个图嘛,复制粘贴就使用不就完了,哈哈哈哈,好像也不是不可以,不过echars难点不在于用,而在于根据UI设计的图行来造,这里就说几个最近我常用的点。
1.legend的修改
如果是想对legend进行改变,则采用的方式如下
legend: {icon: "circle", //改变前面图标的形状,如圆形,正正方形等orient: 'vertical', //纵向排列left: '2%',top:'16%',itemGap:30, //legend中几个选项之间的间距itemHeight:10, //改变前面图标形状的宽高itemWidth:10,data:[xxx] //此处的data数据要与下面series里面的name对应},
注意,有时候会发现,legend和图形表格之间间距过密的情况,此时需要通过gird去控制表格
grid: {left: '3%',right: '4%',top:'3%',height: '40%',containLabel: true},
2.如果要实现多个数据的legend,就需要在series用多个name名称
series: [{//此name名称需要与legend中的data数据对应name: 'xxx',type: 'bar',label: {show: true,position: 'inside'},emphasis: {focus: 'series'},data: [xxx]},{name: 'xxx',type: 'bar',label: {show: true,position: 'inside'},emphasis: {focus: 'series'},data: [xxx]},{name: 'xxx',type: 'bar',label: {show: true,position: 'inside'},emphasis: {focus: 'series'},data: [xxx]},{name: 'xxx',type: 'bar',label: {show: true,position: 'inside'},emphasis: {focus: 'series'},data: [xxx]},{name: 'xxx',type: 'bar',label: {show: true,position: 'inside'},emphasis: {focus: 'series'},data: [xxx]}],
案例图,适合以上所提到的情况
代码
var echarts = require('echarts');var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {xAxis: {type: 'category'},legend: {icon: 'circle', //改变前面图标的形状,如圆形,正正方形等orient: 'vertical', //纵向排列left: '2%',top: '16%',itemGap: 30, //legend中几个选项之间的间距itemHeight: 10, //改变前面图标形状的宽高itemWidth: 10,data: ['a', 'b', 'c', 'd', 'e'] //此处的data数据要与下面series里面的name对应},yAxis: {type: 'value'},grid: {left: '20%',right: '4%',top: '3%',containLabel: true},series: [{//此name名称需要与legend中的data数据对应name: 'a',type: 'bar',label: {show: true,position: 'inside'},emphasis: {focus: 'series'},data: [123]},{name: 'b',type: 'bar',label: {show: true,position: 'inside'},emphasis: {focus: 'series'},data: [231]},{name: 'c',type: 'bar',label: {show: true,position: 'inside'},emphasis: {focus: 'series'},data: [342]},{name: 'd',type: 'bar',label: {show: true,position: 'inside'},emphasis: {focus: 'series'},data: [231]},{name: 'e',type: 'bar',label: {show: true,position: 'inside'},emphasis: {focus: 'series'},data: [342]}]
};option && myChart.setOption(option);
效果图
上一篇:Java-多线程