Echarts初體驗
會對每個字段都進行備注，方便新人小白理解每一個所代表的含義
同一個表內共存兩條折線，
實現效果：
點擊可以隱藏其中一條折線；
讓折線更加圓滑；
鼠標滑過，顯示xy軸的坐標數據；
首先應該有個容器用來存放你想要展示的圖
<div id='biao1' class="biao1"></div>
獲取你想要存放圖像的容器id名
var myChart1 = echarts.init(document.getElementById('biao1'))
option1是你想要展示圖像的數據以及配置
myChart1.setOption(option1)//option1是你想要展示圖像的數據以及配置，這個變量名隨意取，但是要跟下面的一致！！！
Echarts可以通過配置grid.left、grid.right、grid.top、grid.bottom這四個參數來調整圖表在容器中的位置，但是當echarts是獲取動態數據繪圖時，就可能會出現坐標軸的label過長溢出的情況。
這時可以設置grid.containLabel的值為true，這個參數的默認值是false，此時，grid.left、grid.right、grid.top、grid.bottom這四個參數決定的是由坐標軸形成的矩形的尺寸和位置。當修改成true時，這四個參數決定的是包括了坐標軸標簽在內的所有內容所形成的矩形的位置。
var option1 = {
grid : {
top: '15%',
left: '0%',
right: '12%',
bottom: '5%',
containLabel: true
},
legend: {//這個表示點擊按鈕，顯示/隱藏圖形，見下面 圖2
data:['閱讀增長量','預計閱讀增長量']
},
toolbox: {
show : false,
feature : {
saveAsImage : {show: true,color:'#333333'}
}
},
calculable : false,
xAxis: {//X軸想要展示的配置
name: '時間',//x軸的名字
splitLine: {show: true},
data: new_time//x軸的接口數據
},
yAxis: {//Y軸想要展示的配置
name: '閱讀'//Y軸的名字
},
tooltip: {
trigger: 'axis',
axisPointer: {
// type: 'cross',//xy軸顯示，這個效果看 圖4
crossStyle: {
color: '#999'
}
},
formatter: function (obj) {
var value = obj;
if (obj[1]) {
return '<p style="padding: 0;margin-top: 0;margin-bottom: 0;width: 160px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">時間：'+value[0].name+'</p><p style="margin-top: 0;margin-bottom: 0;color:#337aff;">閱讀增長量：'+value[0].value+'<p style="margin-top: 0;margin-bottom: 0;color:#f66;">預計閱讀增長量：'+value[1].value+'</p>';
} else {
return '<p style="padding: 0;margin-top: 0;margin-bottom: 0;width: 160px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">時間：'+value[0].name+'</p><p style="margin-top: 0;margin-bottom: 0;color:#337aff;">閱讀增長量：'+value[0].value+'</p>';
}
//上面的if,return出來的是 圖1 的黑色框框，即鼠標滑過顯示該點的xy軸的數據
}
},
series: [{//你需要顯示幾個折線，就把數據寫道這個數組內，可以是接口數據，也可以是自己模擬，數據data一定要是數組
name:'閱讀增長量',//第一個折線數據的名稱
symbolSize: 8,
color: '#337ab7',//折線的顏色
data: read_num,//接口的數據
type: 'line',//表名這個是折線表
smooth: true//折線圖不夠平滑，有棱角、看着不舒服？，解決辦法：增加一個屬性 smooth:true,
},{
name:'預計閱讀增長量',
symbolSize: 8,//echarts圖表設置標記的大小，看圖3，設置成18，圓圈變的很大
color: '#f66',
data: yuji_read_num,//接口數據
type: 'line',
smooth: true
}]
};
希望能給新人一些幫助，后續也會更新在一個圖表內左右Y軸顯示，以及圓餅圖，柱狀圖跟折線圖共存等等，編寫不易，收藏點贊一下，謝謝！！！