echarts常用功能一

echarts常用功能收集
项目基于MVC

1.引入echarts控件

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

2.官网：

https://echarts.apache.org/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',//坐标轴类型，category:类目轴
                            boundaryGap: false,//留白，为true时，标签和数据点在两个刻度中间
                            data: xdata,//x轴显示的数据标签值
                        },
                    ],

如果是多个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);