echarts常用功能一

echarts常用功能收集
項目基於MVC

1.引入echarts控件

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

2.官網：

https://www.echartsjs.com/examples/zh/index.html

3.獲取數據

從後臺獲取數據data，將橫軸座標和Y軸數據分別存入xdata和ydata數組中。

4.聲明：

var mychart;//當窗口放大縮小時，圖形自適應
mychart=echarts.init(document.getElementById(“chartDiv”));
window.onresize = function (e) {
mychart.resize(e);
}

5.設置option。

網上大量實例，官網實例也很多，在此就只列出常用功能。

(1) title屬性：

text:echarts圖形標題；
show:true/false 標題是否顯示；
left:'center’標題居中；

(2)color屬性：

數組[]，每個曲線的顏色數組。

(3)tooltip:

鼠標放在曲線上顯示的提示信息。
formatter:可定義提示信息。

(4)legend屬性：

data:數組，圖例標題數組，圖例標題必須和曲線名稱一致；
x:'center' 居中；或top:30 位置偏移

(5) toolbox屬性：

right:100 位置偏移
feature:鍵值對，一些常用工具，比如保存爲圖片等等

(6)grid:echarts分佈情況

如果只用一個x,y軸，就不需要設置。
如果是一個x軸，如有三條不同曲線呈垂直分佈，就需要三組，分別設置left,right,top,height

(7)xAxis:x軸數組

一般情況下如下設置：

xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: xdata,
                        },
                    ],

如果是多個X軸，如三條，就是3個Object，Object中包括gridIndex(這個屬性一定要設置正確，否則會報“get”錯誤)，show:true/false是否顯示。

(8)yAxis:y軸數組

一般情況下如下設置：

yAxis: [
                        {
                            name: 'YYY',//Y軸標題
                            nameLocation: 'middle',//標題居中顯示
                            nameGap: 50,//標題距離Y軸的距離
                            type: 'value',
                            //min: 0,//最小值
                            //max: 20//最大值
                            splitLine: {//網格線
                                        lineStyle: {
                                            color: '#EAEAEA'
                                        }
                                    }
                        }
                    ],

如果是多個Y軸，如三條，就是3個Object，Object中包括gridIndex(這個屬性一定要設置正確，否則會報’type’ of undefined錯誤)
show:true/false是否顯示；
position:left/rightY軸居左，還是居右
nameGap:和grid裏面的left對應使用，如果大於grid的left,是出不來效果的。

(9)series:圖形(如曲線)數組

一般情況下如下設置：

series: [
                                {
                                    name: 'XXX',//這個必須和圖例標題一致，否則圖例出不來，但可以和YYY(y軸標題)不同。
                                    type: 'line',//圖形類型
                                    xAxisIndex: 0,//曲線在x軸索引
                                    yAxisIndex: 0,//曲線在y軸索引
                                    //如果有多個曲線，上面兩個屬性必須對應，否則，報'type' of undefined錯誤。
                                    data: ydata,//數據
                                    symbolSize: 5,//曲線上點的標識大小
                                    smooth: true,//是否平滑
                                    hoverAnimation: false,//鼠標放在線上的動畫
                                }
 ]

如果是多個曲線，如六條，就是6個Object

6.賦值

mychart.setOption(option);