先看效果图, 效果图如下.
- html
- <div class="row">
- <div id="main"></div>
- </div>
- JS
- // Ajax 加载数据
- $.Ajax({
- url : ROOT + "/index/count",
- async : false,
- type : 'GET',
- dataType : 'json',
- success : function(obj) {
- zFun(obj.echatX, obj.echatY, obj.echatY2, obj.echatY3);
- // xFun(obj.echatX, obj.echatY4);
- },
- });
- function zFun(x, y, y2, y3) {
- // 基于准备好的 dom, 初始化 echarts 实例
- var myChart = echarts.init(document.getElementById('main'));
- console.log(x);
- console.log(y);
- console.log(y2);
- console.log(y3);
- // 指定图表的配置项和数据
- myChart.setOption({
- title : {
- text : '统计'
- },
- tooltip : {
- trigger : 'axis',
- axisPointer : {
- type : 'cross',
- label : {
- backgroundColor : '#6a7985'
- }
- }
- },
- legend : {
- data : [ '进厂', '服务', '离厂' ]
- },
- toolbox : {
- },
- grid : {
- left : '3%',
- right : '4%',
- bottom : '3%',
- containLabel : true
- },
- xAxis : [ {
- type : 'category',
- boundaryGap : false,
- data : x
- } ],
- yAxis : [ {
- type : 'value'
- } ],
- series : [ {
- name : '进厂',
- type : 'line',
- stack : '总量',
- itemStyle : {
- normal : {
- color : '#a8bcd4'
- }
- },
- areaStyle : {
- normal : {}
- },
- data : y
- }, {
- name : '服务',
- type : 'line',
- stack : '总量',
- itemStyle : {
- normal : {
- color : '#a8bcd4'
- }
- },
- areaStyle : {
- normal : {}
- },
- data : y3
- },
- {
- name : '离厂',
- type : 'line',
- stack : '总量',
- itemStyle : {
- normal : {
- color : '#a8bcd4'
- }
- },
- label : {
- normal : {
- show : true,
- position : 'top'
- }
- },
- areaStyle : {
- normal : {}
- },
- data : y2
- } ]
- });
- }
来源: http://www.jianshu.com/p/d17af279a775