百度ECharts 3.0 多坐标轴统计图一般配置详解（实例） jQuery插件

ECharts 是百度出品的jquery图表插件。相对于Chartist，拥有更加强大的功能，以及更加详细的文档（ECharts的文档形式非常优秀，简明易懂）。ECharts支持的图表种类非常多，同时兼容性也十分优良，故而在网站建设动态统计图表时，是一个非常优秀的选择。
配置首先，配置echart首先需要在前台模板建立一个div容器，同时必须给容器指定一个宽度或高度，因而在响应式页面中发挥并不出色。

然后便可开始正式的配置：

function createChartz(obj){//以函数来说明，向函数中传入创建图表所需数据 var myChart = echarts.init(document.getElementById('chart')); //获取容器 window.onresize = myChart.resize; //主要用于网页响应，可省略 myChart.setOption({tooltip: {//提示框 trigger: 'axis'//触发类型 }, legend: {//图例 left: 40,//图例位置 bottom:0, data: ['销售金额（元）', '使用金额（元）','购买总数（张）','使用总数（张）']//数据 }, xAxis: { data: obj.labelvalue,//横轴数据，本例为动态传入本月天数 splitLine:{ show:true,//网格线 lineStyle:{ color: ['#eee', '#eee'] } } }, grid: { show:true, left:40, right:40, top:10, bottom:60}, yAxis : [//纵轴，多个轴写入数组[]中 { type : 'value', position: 'left', splitNumber: 5, boundaryGap: [0,0.1], axisTick : {// 轴标记 show:true, length: 10, lineStyle: { color: 'green', type: 'solid', width: 2 },}, splitLine:{ show:true, lineStyle:{ color: ['#eee', '#eee'] } }}, { type : 'value', splitNumber: 5, position: 'right', splitLine:{ show:false, }} ], series: [{ name: '销售金额（元）', type: 'bar',//bar为柱状图，其他type还有line,pie等等 data: obj.data1,//为横轴对应数组 yAxisIndex: 0//数据对应轴,从0开始 },{ name: '使用金额（元）', type: 'bar', data: obj.data2, yAxisIndex: 0 },{ name: '购买总数（张）', type: 'bar', yAxisIndex: 1, data: obj.data3 },{ name: '使用总数（张）', type: 'bar', yAxisIndex: 1, data: obj.data4 },], color:['rgb(26, 179, 148)','rgb(28, 132, 198)','rgb(178, 247, 142)','rgb(237, 173, 173)']//自定义颜色});

【百度ECharts 3.0 多坐标轴统计图一般配置详解（实例）】以上便是ECharts的一般配置，如有疑问可联系本人~