echarts配置项

ECharts（百度的一个开源可视化库）的配置项决定了图表的样式、数据、交互等行为。

• title：图表标题的配置项，可以设置标题的文本内容、字体样式、居中对齐等。

title: {
        text: 'World Population'
},

• xAxis和yAxis：

yAxis: {

        name: '℃',

        show: true,        // 是否显示Y轴

        scale:true,        //y轴根据数值实现自适应

        type: 'value',

        inside: false,        // Y轴的标签是否朝内

        interval: 50,        // Y轴的刻度间隔

        nameTextStyle: {        //name的颜色

                color: '#666'

        },

        splitLine: {        //网格线

                show: true,

                lineStyle: {

                        color: 'rgb(34, 175, 198)',

                        type: 'solid'

                }

        },

        axisLabel: {

                show: true,

                color: '#666',

                 interval: 3

        },

        axisLine: {

                // show: false

                lineStyle: {

                        color: 'rgb(34, 175, 198)',

                        type: 'solid'

                }

        },

        axisTick: {

                show: false

        }

},

• legend：图例的配置项，可以设置图例的标题、布局、位置等。

legend: {

        top:'5%',

        right: '1%',

         itemWidth: 10,         // 图例图形宽度

        itemHeight: 10,         // 图例图形高度

        textStyle: {

                color: '#ccc',

                fontSize:'10'

        }

},

• tooltip：提示框的配置项，可以设置提示框的显示方式、样式、内容等。

tooltip:{
    trigger: 'axis',         // 触发类型，'axis' 表示坐标轴触发，适用于柱状图、折线图等
        // trigger: 'item',         // 触发类型，'item' 表示数据项触发，适用于饼图等
        // trigger: 'none',         // 关闭提示框
        showDelay: 0,         // 显示延迟，单位为 ms
        hideDelay: 100,         // 隐藏延迟，单位为 ms
        enterable: false,         // 提示框是否允许鼠标进入
        // 提示框容器的 CSS 样式
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
        // 提示框内容格式器
        formatter: function(params) {
            // params 是一个数组，数组中包含每个系列的数据信息
            let result = params[0].name + '<br/>';
            params.forEach(function (item) {
                result += item.seriesName + ': ' + item.value + '<br/>';
            });
            return result;
        }
  }

• toolbox：工具箱的配置项，可以设置工具箱的布局、按钮样式等。

toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },

• grid：网格的配置项，可以设置网格的位置、大小、背景色等。

grid: {

        left: "2%",

        right: "2%",

        bottom: "1%",

        containLabel: true

},

• dataZoom：数据区域缩放的配置项，可以设置数据缩放的方式、范围等。
• visualMap：视觉映射的配置项，可以设置映射的方式、颜色、范围等。
• series：数据系列的配置项，可以设置系列的类型、数据、样式等。不同类型的系列有各自的特定配置项，如line系列的smooth属性、bar系列的stack属性等。

series:[

{
        name:'温度',
        data:[0.3,0.47,0,0],

        yAxisIndex: 1,        //对应第几条y轴
        type:'line',        //line折线图  bar柱状图
        smooth:true,        //圆滑曲线

        symbol:'none',        //折线隐藏小圆点

        barWidth: '30%',        //柱状图宽度
        markPoint:{        //最大值最小值
                data:[
                        {type:'max',name:'Max'},
                        {type:'min',name:'Min'}
                ]
        },

        markLine: {

                data: [

                        { type: 'average', name: '平均值' }

                ]

        },

        lineStyle:{
                width:4,        //设置折线宽度

                type: 'dashed' // 设置为虚线
        },

        tooltip: {
                valueFormatter: function (value) {
                        return value + ' t';        //鼠标移到上面显示的文字
                }
        },
        //在series的itemStyle中设置渐变色
        itemStyle:{
                normal:{
                        color:newecharts.graphic.LinearGradient(
                        0,0,0,1,//这四个参数分别表示渐变的起点(x1,y1)与终点(x2,y2)
                        [
                                {offset:0,color:'rgb(58,232,156)'},        //0%处的颜色
                                {offset:1,color:'rgb(34,175,198)'}        //100%处的颜色
                        ]
                        )

                }
        },

        //横向条形图设置每条数据的颜色

        itemStyle: {

                barBorderRadius: [50, 0, 0, 50],         // 统一设置四个角的圆角大小

                normal: {

                //这里是重点

                        color: function (params) {

                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色

                                var colorList = [

                                        'rgb(0, 173, 169)',

                                        'rgb(0, 173, 169)',

                                        'rgb(28, 197, 80)',

                                        'rgb(0, 140, 217)',

                                        'rgb(163, 143, 253)',

                                        'rgb(255, 166, 82)',

                                        'rgb(249, 84, 84)'

                                ];

                                return colorList[params.dataIndex];

                        }

                }

        },

        //顶部展现数字

        label: {

                show: true,         // 显示数据

                color:'#666',

                position: 'right',         // 数据显示的位置

                // 格式化数据显示

                formatter: '{c}'         // {c} 代表数据值

        },

}

]

• 其他配置 

var chartDom = document.getElementById('main');

var myChart = echarts.init(chartDom);

var option;

option = {……}

option && myChart.setOption(option,true);

 window.onresize = function () {

        myChart.resize();

};