2. Echars的使用和案例

Echars

一、Echars的使用

官网 https://www.echartsjs.com/api.html#echarts

1. 在h5界面上留下echars要进行展示的位置

<div class="chart-b" id="week-line"></div>

2. 获取数据，按照x轴数据，y轴数据分开存储，如果是和日期等和顺序有关的数据请尽量在后台完成排序，前台尽量只负责展示，减少前端负担

var xData = []；
var yData = []；

3. 初始化echars，在h5界面上留下echars要进行展示的位置

var kbChart = echarts.init(document.getElementById('month-line'));

4. 定义规则

Option{
	参考案例
}

5. 加载echars，简单的echars已经画好了

kbChart.setOption(Option);

6. 如果需要回调方法请参见API

二、echars案例

function loadMonthEchars(echarsData) {   			//传入的是json数组
     // 库表折线图							
     var xData = [];								//x轴数据
     var yDate= [];									//y轴数据
     for(var i = 0;i < echarsData.length; i++){		//赋值
     	xData .push(echarsData[i].update_time);		//修改属性
    	    yData .push(echarsData[i].data_count);
     }

     var kbChart = echarts.init(document.getElementById('month-line'), 'theme');    //初始化

     var kbOption = {								//定义规则
  	 	title: {							
             text: '上月数据汇总',     				//主标题
             textStyle:{
                 color:'#0DB9F2',        			//颜色
                 fontStyle:'normal',     			//风格
                 fontWeight:'normal',   			//粗细
                 fontFamily:'Microsoft yahei',   	//字体
                 fontSize:20,     					//大小
                 align:'center'   					//水平对齐
             }
		 },
         tooltip: {
             trigger: 'axis',
             position: function (pt) {
                 return [pt[0], '10%'];
             }
         },
         grid: {
             left: 40,
             right: 40,
             bottom: 75,
             top: 30
         },
         calculable : true,
         xAxis : [
             {
                 type : 'category',
                 axisLabel: {
                     color: "#194296"  				//刻度线标签颜色
                 },
                 boundaryGap : false,
                 data : timeData
             }
         ],
         yAxis : [
             {
                 type : 'value',
                 splitLine:false,
                 axisLabel: {
                     color: "#194296"  				//刻度线标签颜色
                 },
                 /*data : ['0','20','40','60','80','100']*/
             }
         ],
         dataZoom: [{
             type: 'inside',
             start: 0,
             end: 50,
             bottom: 10
         }, {
             start: 0,
             end: 50,
             handleSize: '100%',
             bottom: 10,
             handleStyle: {
                 color: '#fff',
                 shadowBlur: 3,
                 shadowColor: 'rgba(0, 0, 0, 0.6)',
                 shadowOffsetX: 2,
                 shadowOffsetY: 2
             }
         }],
         series : [
             {
                 name:'数据总量',
                 type:'line',
                 color:'#d5d073',
                 smooth:true,//设置折线图平滑
                 data : allCount
             }
         ]
     };
     kbChart.setOption(kbOption);
 }

三.使用echars时，div隐藏导致图表加载echars默认大小问题

在css中不要设置div隐藏，负责会导致echars加载默认宽度100px，在js的文本就绪事件中完成echars隐藏即可解决