echarts 配置文件详解

    本人新手，最近在研究echarts折线图时，发现了echart2.0版本和3.0版本中有很多属性改变了，配置echarts时就得按最新版本来配置下面是配置的一些需要注意的地方。

1、js中chart的配置信息：

var chart= {
    title: {          //标题，每个图表最多仅有一个标题控件
        text: title,  //主标题文本，
        x: 'center',  //水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
        textStyle: {  //主标题文本样式
            fontSize: 15
        }
    },
    lineStyle: {      //echart主配置中没有这个属性，而且改变width没有变化
        width: 1
    },
    legend: {         //图例，每个图表最多仅有一个图例，混搭图表共享，同温湿度传感器右侧的图例相同，点击时数据隐藏
        show: false,
        orient: 'vertical',
        x: 'right',
        y: 'center',
        data: [location]
    },
    toolbox: {    //则线图右上角的工具箱
        show: true,  //是否显示工具箱

        feature: {   //工具箱标志
            mark: {
    show: true},  //辅助线标志；3.0版本取消该属性
            dataZoom: {  //框选区域缩放
                show: true,
                iconStyle: {  //3.0版本新出属性，用于修改icon样式，也可进行自定义操作
                    normal: {
                        borderColor: "green"
                    }
                }
            },
            dataView: {
    show: false,  //数据视图
                readOnly: true,
                iconStyle: {  //设置icon样式
                    normal: {
                        borderColor: "yellow"
                    }
                }
            },
            magicType: {
    show: false, type: ['line', 'bar']}, //动态类型切换，特别重要，多图切换，支持直角系下的折线图、柱状图、
            // 堆积、平铺转换，上图icon左数6~14，分别是切换为堆积，切换为平铺，
            // 切换折线图，切换柱形图，切换为力导向布局图，切换为和弦图，切换为饼图，切换为漏斗图

            restore: {
    show: true,  //还原，复位原始图表
                iconStyle: {
                    normal: {
    borderColor: "blue"}
                }
            },
            saveAsImage: {
    show: true,
                iconStyle: {
                    normal: {
    borderColor: "#cf0109"}
                }

            } //保存图片（IE8-不支持）
        }
    },
    grid: {  //直角坐标系内绘图网格
        x: 60,  //直角坐标系内绘图网格左上角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心)
        y: 30,  //直角坐标系内绘图网格左上角纵坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域纵向中心)
        x2: 30, //直角坐标系内绘图网格右下角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心)
        y2: 40  //直角坐标系内绘图网格右下角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心)
    },
    calculable: true, //是否启用拖拽重计算特性。这个也没有实现，看看后面代码是否有覆盖

    tooltip: {    //提示框，鼠标悬浮交互时的信息提示*******************************************************************************************************
        show: true,
        trigger: 'item'  //触发类型，默认数据触发，可选为：'item' | 'axis'
    },
    dataZoom: [{  //3.0版本dataZoom中可选两种type，inside为鼠标滑轮滚动缩放，slider为图表下方滚动条缩放。
        type:'slider',//数据区域缩放,数据展现范围选择
        show: true,
        realtime: true,  //缩放变化是否实时显示，在不支持Canvas的浏览器中该值自动强制置为false。
        height: 20,
        backgroundColor: 'rgba(12,0,0,0)'//背景颜色，默认透明
    },{
    type:'inside'}],
    xAxis: [
        {
            type: 'value', //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
            max: xmax,     //指定的最大值，eg: 100，默认无，会自动根据具体数值调整，指定后将忽略boundaryGap[1]
            min: xmin,     //指定的最小值，eg: 0，默认无，会自动根据具体数值调整，指定后将忽略boundaryGap[0]
            scale: xscale, //脱离0值比例，放大聚焦到最终_min，_max区间
            axisLabel: {   //坐标轴文本标签
                formatter: function (value) { //间隔名称格式器
                    var v = value.toString().length > 8 ? (value.toFixed(6)) : value;
                    return v + xunit;    //{value}s;横坐标的间隔距离 10s，20s
                },
                textStyle: {  //文本样式，其中当坐标轴为数值型和时间型时，color接受方法回调，实现个性化的颜色定义，support #226 ?
                    align: 'right',
                    fontSize: 10
                }
            }
        }
    ],
    yAxis: [
        {
            name: '幅值(' + unit + ')',  //y轴名称
            type: 'value',               //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
            max: ymax,                  //指定的最大值，eg: 100，默认无，会自动根据具体数值调整，指定后将忽略boundaryGap[1]
            min: ymin,                  //指定的最小值，eg: 100，默认无，会自动根据具体数值调整，指定后将忽略boundaryGap[1]
            scale: yscale,              //脱离0值比例，放大聚焦到最终_min，_max区间
            boundaryGap: [0.1, 0.1],    //坐标轴两端空白策略，数组内数值代表百分比，[原始数据最小值与最终最小值之间的差额，原始数据最大值与最终最大值之间的差额]
            axisLabel: {                //坐标轴文本标签
                formatter: '{value}',   //间隔名称格式器
                textStyle: {            //文本样式，其中当坐标轴为数值型和时间型时，color接受方法回调，实现个性化的颜色定义，support #226 ?
                    fontSize: 8
                }
            }
        }
    ]
};
//给chart中赋series值
chart.series.push({
    name: location, //系列名称，如启用legend，该值将被legend.data索引相关
    type: 'line',   //展示类型
    data: array,    //展示数据（数据从数据库中提取出来时，需要封装成array）
    symbolSize: 1, //标志图形大小，如果设置为0时，tooltip工具将无法获取数据焦点，无法显示提示框。
    
});
//提示框文本信息间隔格式器（params为选取的那个点）
chart.tooltip.formatter = function (params) {

    //得到xstr=时间：2017-11-01 10:30
    var xstr = typeof (params.value[0]) == "undefined" ? params.name : '时间：' + params.value[0] + 's';
    //得到ystr=幅值：2.354cm/ss
    var ystr = typeof (params.value[1]) == "undefined" ? params.value.toFixed(6) : params.value[1].toFixed(6);
    return xstr + '
' + '幅值：' + ystr + rtUnit;
}

//初始化一个 ECharts 实例,返回 echartsInstance。传入两个参数dom： 实例容器，一般是一个具有高宽的div元素。
//theme：应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。
//theme_blue中配置了模板，
var globalChartOri = echarts.init(document.getElementById('comm_ori' + index), theme_blue);

//设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，
// 然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
globalChartOri[i].setOption(chart);
 

2、展示效果

第一次写博客，内容不算详尽，希望能给想我一样的新手有所帮助!!!!!!