有人说，不就是个图嘛，复制粘贴就使用不就完了，哈哈哈哈，好像也不是不可以，不过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);

效果图