项目整理二：Echarts

Echarts官方文档：http://echarts.baidu.com/echarts2/doc/doc.html

首先看下实现的效果图：

还有其他的效果图，暂不贴出
这里主要记录如下几点
1、多条折线的设置，series
2、折线上的点的设定
3、折线颜色的设定
4、折线的点击事件

多条折线的设置

一条折线

series:
            name: names,
            type: 'line',
            smooth: true,
            symbol: 'image://static/hdst/images/index/symbol.png',
            showSymbol:false,
            symbolSize: 18,
            hoverAnimation: false,
            areaStyle: { normal: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{offset: 0, color: 'rgba(75, 178, 255, 0.4)'}, {offset: 1, color: 'rgba(75, 178, 255, 0)'}], globalCoord: false}}},
            lineStyle: { normal: { color: '#16d1d9', width: 3} },
            data:datas,
            markPoint: {
                 data: [
                          {type: 'max', name: '最大值', symbol: 'image://static/hdst/images/index/symbol.png', symbolSize:18, label: {normal: {show: true,offset: [0, -20],textStyle: {color: '#fff',fontSize: 13,}}}},
                          {type: 'min', name: '最小值', symbol: 'image://static/hdst/images/index/symbol.png', symbolSize:18, label: {normal: {show: true,offset: [0, -20],textStyle: {color: '#fff',fontSize: 13,}}}}
                 ]
            },
            markLine: {
                silent: true,
                symbolSize:0,
                lineStyle: { normal: { color: '#dd6f94', opacity:1 }},
                data: [[{ name:'开口汽量', label: {normal: {position:'middle'}}, coord:[0, g_expected_flow] }, {coord:[max_x, g_expected_flow]}]]
            }

多条折线
首先声明一个变量

var Item = function(){  
        return {  
            name: '',
            type: 'line',
            smooth: true,
            symbol: 'image://static/hdst/images/index/symbol.png',
            showSymbol:false,
            symbolSize: 18,
            hoverAnimation: false,
            areaStyle: { normal: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{offset: 0, color: 'rgba(75, 178, 255, 0.4)'}, {offset: 1, color: 'rgba(75, 178, 255, 0)'}], globalCoord: false}}},
            lineStyle: '',
            data:'',
            markPoint: {
                 data: [
                          {type: 'max', name: '最大值', symbol: 'image://static/hdst/images/index/symbol.png', symbolSize:18, label: {normal: {show: true,offset: [0, -20],textStyle: {color: '#fff',fontSize: 13,}}}},
                          {type: 'min', name: '最小值', symbol: 'image://static/hdst/images/index/symbol.png', symbolSize:18, label: {normal: {show: true,offset: [0, -20],textStyle: {color: '#fff',fontSize: 13,}}}}
                 ]
            },
            markLine: ''
        }  
    };

这里的多条折线，不同的是折线的名称、数据、折线风格，因此在Item中把这几个属性设为空值，可以对这几个属性进行重新赋值。

    var seriesContent=[];
    for(var i=0;i<result.length;i++){
        var tempData = [];
        ......
        var it = Item();
        it.name = g_charts_name[i];
        it.data = tempData;
        it.lineStyle = {normal: { color: colorArray[count], width: 3}};
        count+=1;
        seriesContent.push(it);
    }
var option ={
    ......
    series:seriesContent
}

折线上的点的设定

下面的代码是标记一条折线上的最大值和最小值，还有其他多种标记方式

 markPoint: {
                 data: [
                          {type: 'max', name: '最大值', symbol: 'image://static/hdst/images/index/symbol.png', symbolSize:18, label: {normal: {show: true,offset: [0, -20],textStyle: {color: '#fff',fontSize: 13,}}}},
                          {type: 'min', name: '最小值', symbol: 'image://static/hdst/images/index/symbol.png', symbolSize:18, label: {normal: {show: true,offset: [0, -20],textStyle: {color: '#fff',fontSize: 13,}}}}
                 ]
            },

为了每个点上都有点击事件，所以在这边对折线上每个点进行标记，这里对markPoint的data进行重新设定

for (var k = 0; k < tempData.length; k++) {
            it.markPoint.data.push({xAxis: tempData[k][0], yAxis: tempData[k][1],symbol: 'image://static/hdst/images/index/symbol.png', symbolSize:18, label: {normal: {show: true,offset: [0, -20],textStyle: {color: '#fff',fontSize: 13,}}}});
        }

Echarts官方文档中对于series.markPoint.data的介绍

series.markPoint.data

标注的数据内容数组，最直接的数据项可直接指定标注位置（x，y）以及相关名称（name）和值（value），在饼图、雷达图、力导、和弦图中基本如下:

data : [
{name: ‘标注1’, value: 100, x: 50, y: 20},
{name: ‘标注2’, value: 200, x: 150, y: 120},
…
]

在存在直角坐标系的图表如折线、柱形、K线、散点图中，除了通过直接指定位置外，如果希望标注基于直角系的定位，可以通过xAxis，yAxis实现，这两个值都会根据坐标轴类型以及传入参数的不同自动换算如下：

data : [
{name: ‘标注1’, value: 100, xAxis: 1, yAxis: 20}, // 当xAxis为类目轴时，数值1会被理解为类目轴的index
{name: ‘标注2’, value: 100, xAxis: ‘周三’, yAxis: 20}, // 当xAxis为类目轴时，字符串’周三’会被理解为与类目轴的文本进行匹配
{name: ‘标注3’, value: 200, xAxis: 10, yAxis: 20}, // 当xAxis或yAxis为数值轴时，不管传入是什么，都被理解为数值后做空间位置换算
…
]

更为实用的，在折线、柱形、散点图中，可以直接使用如下几个开箱即用的特殊点标注

data : [
{type : ‘max’, name: ‘自定义名字’}, // 最大值
{type : ‘min’, name: ‘自定义名字’} // 最小值
]

标注数据比较特殊也最为常用的地图上，除了直接位置定位外，如果希望基于地理坐标标注，并且能够随地图漫游缩放，需要为markPoint提供一份geoCoord，如下

data : [
{name: ‘北京’, value: 100},
{name: ‘上海’, value: 200},
…
],
geoCoord : {
“北京”:[116.46,39.92], // 支持数组[经度，维度]
“上海”: {x: 121.48, y: 31.22}, // 支持对象{x:经度,y:纬度}
…
}

折线颜色的设定

颜色在lineStyle中进行设置的
多条折线，可以定义一个颜色的数组，对每一个series进行赋值时，设置lineStyle属性

var colorArray = [‘#FFFF00’,’#FF0000’,’#FF00FF’,’#16d1d9’,’#4B0082’];
it.lineStyle = {normal: { color: colorArray[count], width: 3}};
count+=1;

折线的点击事件

var myChart ;
myChart = echarts.init(document.getElementById('***'));
myChart.on('click', function (params) {
    var id = option.series[params.seriesIndex].id;
    这里写事件方法
});