Echarts报表：折线图 & 饼图

参考：官方教程  配置项

最近使用折线图和饼图居多，使用时一般要修改其默认格式

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<script src="echarts.min.js"></script>

折线：

1、在固定位置定义div

<div class="first-item">
       <div style="text-align:center;margin-top:10px">故障数据分析 共$!sumCount1次</div>
       <div id="mainChart1" style="width: 100%;height:270px;"></div>
</div>

2、添加js 

<script>
	var data = $data1;                      //对返回的json数据进行处理
	var timeData = new Array(0);            //声明数组
	var values = new Array(0);
	for(var i=0;i<data.length;i++){
		timeData.push(data[i].d);       //放值
		values.push(data[i].v);
	}
	
	var myChart = echarts.init(document.getElementById('mainChart1'));   //基于准备好的dom，初始化echarts实例
	option = {
		/*title : {                             //标题
		    text: '设备故障图',
		    subtext: '近7天修理',
		    x: 'center'
		},*/                           
		tooltip : {				//提示框
		    trigger: 'axis',
		    axisPointer: {
			animation: false
		    }
		},                         
		/*legend : {                         //图例 - 显示开关
		    data:['数量'],               
		    x: 'left'
		 },*/                           
		/*toolbox : {                        //右上角工具按钮
		    dataZoom : {     
		        yAxisIndex : 'none'
		    },
		    restore : {},
		    saveAsImage : {}
		},*/                      
		axisPointer : {                     //坐标轴指示器
		    link: {xAxisIndex: 'all'}       //其中每一项表示一个 link group，一个 group 中的坐标轴互相联动
		},
		dataZoom : [{                       //dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
		    show : true,
		    realtime : true,
		    start : $start,                 //显示数据起始位置
		    end : $end,                     //显示数据结束位置        
		    xAxisIndex : [0,1]              //表示这个 dataZoom 组件控制 第一个 和 第二个 xAxis
		}],
		/*grid : [{                         //直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴; 直接注释掉单个表会自动完全填充,
		    left: 50,
		    right: 50,
		    height: '35%'
		}, {
		    left: 50,
		    right: 50,
		    top: '55%',
		    height: '35%'
		}],*/       
		xAxis : [{
		    type : 'category',
		    bounddaryGap : false,
		    axisLine : {onZeron : true},
		    data : timeData                  //x轴显示数据
		},                                   //第一个xAxis
		{}                                   //第二个xAxis                                                    
		],
		yAxis : [{
			name : '数据',                   //y轴的定义
			type : 'value',
			max : $faultNum                  //动态显示最大故障数                          
		},
		{}
		],            
		series : [                           //系列列表。每个系列通过 type 决定自己的图表类型
		    {  
			name:'故障数量',
			type:'line',
			symbolSize: 8,
			hoverAnimation: true,        //是否开启 hover 在拐点标志上的提示动画效果
			data: values
		    }
		]，
		color:['#28d8ce']                    //折线颜色
	};
	myChart.setOption(option);               //使用刚指定的配置项和数据显示图表
</script>

效果：

饼图：

1、定义div

<div class="first-item1" style="margin-left:0.5%">
      <div style="text-align:center;height:26px;margin-top:3%">任务类型分析</div>
      <div id="mainChart4" style="width: 100%;height:260px;"></div>
</div>

2、添加js

<script type="text/javascript">
    var s2 = $data4;
    var names = new Array(0);
    for(var j in s2){
        names.push(s2[j].name);
    }

    var myChart = echarts.init(document.getElementById('mainChart4'));         // 基于准备好的dom，初始化echarts实例
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name:'任务分析',
                type:'pie',
                radius : '55%',
                center : ['50%', '50%'],
                data:s2
            }
        ],
        color: ['#3aa0ff','#36cbcb','#f2637b','#fad337']     //扇叶颜色
    };
    myChart.setOption(option);               // 使用刚指定的配置项和数据显示图表。
</script>

效果：