echarts自定义配置（持续更新）

1、图片自适应重绘

window.onresize = function () {myChart.resize(); //使第一个图表适应}

2、鼠标在左边tooltip在右边

tooltip : {trigger : 'axis',position: function (pos, params, dom, rect, size) {// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。var obj = {top: 60};obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;return obj;}},

3、保存图片问题

toolbox: {show: true,feature: {saveAsImage: {show: true}}},

----------------------------------------------------------------------------

2017.8.14更新

鼠标在左tooltip在右边这段可以直接设置为

confine : true

此项配置非常非常非常有用，比上面的配置2更加实用，因为配置2实测焦点离鼠标点击位置太远，用户体验不好。

----------------------------------------------------------------------------

2017.8.22更新

4、让数据集中显示在min和max之间

function getNew(a){var b = [];for(var i = 0; i <= a.length-1; i++){ if(a[i]) {b.push(parseFloat(a[i]));}}return b;}function max(b){var a = getNew(b);var max = a[0];var len = a.length;for (var i = 0; i <= len-1; i++){ if(!a[i]) continue;if (a[i] > max){ max = a[i]; } } return max;}function min(b){var a = getNew(b);var min = a[0];var len = a.length;for (var i = 0; i <= len-1; i++){ if(!a[i]) continue;if (a[i] < min){ min = a[i]; } } return min;}/** * 取两个数组中最大值和最小值并将之差除以5，返回另一个数组 * @param a * @param b * @returns {Array} */function compareArr(a,b){var c = [];c.push(format(max(a)));c.push(format(min(a)));c.push(format(max(b)));c.push(format(min(b)));var d = (max(c) - min(c))/5;if(max(c) && min(c)){var m = parseFloat(max(c)) + d;var n = parseFloat(min(c)) - d;return new Array(m.toFixed(2),n.toFixed(2));}else return new Array('','');}

在图表中需要设置最大值和最小值的地方调用

var m = comArr(yCdata);var max = m[0];var min = m[1];

并在相应的需要设置的最大值和最小值得地方配置max和min

-------------------------------------------------------------------------

2017.8.28更新

5、让数据集中显示，不需要设置最大最小值，只需设置不强制显示0

scale :true,

-------------------------------------------------------------------------

2017.9.6更新

6、日期显示格式精简化，只在第一个日期前加上年份，其他日期去掉年份和多余的0显示

formatter: function (value, index) {                    // 格式化成月/日，只在第一个刻度显示年份                    var date = new Date(value);                    var texts = [(date.getMonth() + 1), date.getDate()];                    if (index === 0) {                        texts.unshift(date.getFullYear());                    }                    return texts.join('/');                }

7、使图像平滑显示

scale: true,

8、完整实例

function drawCharts(xdata, yAdata, yBdata, yCdata, yDdata, strA, strB, strC, strD) {    var i,    len = xdata.length,    xdatas = [];    for(i = 0; i < len; ++i){    xdatas[i] = xdata[i].replace(/-/g, ",");    }    xdata = xdatas;        var myChart = echarts.init(document.getElementById('echartsContainer'));        myChart.setOption({}, true);        myChart.setOption(option = {            legend: {                data: [strA, strB]            },            tooltip: {                trigger: 'axis',                confine: true            },            grid: {                left: '3%',                right: '4%',                bottom: '3%',                containLabel: true            },            xAxis: {                type: 'category',                boundaryGap: false,                data: xdata.map(function (str) {                    return str.replace(' ', '\n')                }),                axisLabel: {                formatter: function (value, index) {                    // 格式化成月/日，只在第一个刻度显示年份                    var date = new Date(value);                    var texts = [(date.getMonth() + 1), date.getDate()];                    if (index === 0) {                        texts.unshift(date.getFullYear());                    }                    return texts.join('/');                }                }            },            yAxis:                [                    {                        type: 'value',                        scale: true,                        position: 'left'                    },                    {                        type: 'value',                        scale: true,                        position: 'right'                    }                ],            series: [                {                    name: strA,                    type: 'line',                    smooth:true,                      stack: '总量',                    data: yAdata                },                {                    name: strB,                    type: 'line',                    yAxisIndex: 1,                    smooth: true,                    symbol: 'none',                    sampling: 'average',                    itemStyle: {                        normal: {                            color: 'rgb(255, 70, 151)'                        }                    },                    areaStyle: {                        normal: {                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{                                offset: 0,                                color: 'rgb(255, 158, 68)'                            }, {                                offset: 1,                                color: 'rgb(255, 70, 131)'                            }])                        }                    },                    data: yBdata                }            ]        });        var myChart1 = echarts.init(document.getElementById("echartsContainer1"));        myChart1.setOption({}, true);        myChart1.setOption(option = {            title: {},            tooltip: {                trigger: 'axis',                confine: true            },            legend: {                data: [strC]            },            grid: {                left: '3%',                right: '4%',                bottom: '3%',                containLabel: true            },            xAxis: {                type: 'category',                boundaryGap: false,                data: xdata.map(function (str) {                    return str.replace(' ', '\n')                }),                axisLabel: {                formatter: function (value, index) {                    // 格式化成月/日，只在第一个刻度显示年份                    var date = new Date(value);                    var texts = [(date.getMonth() + 1), date.getDate()];                    if (index === 0) {                        texts.unshift(date.getYear());                    }                    return texts.join('/');                }                }            },            yAxis: {                name: '价格(元)',                scale: true,                type: 'value',                position: 'left'            },            series: {                name: strC,                type: 'line',                smooth:true,                  stack: '总量',                itemStyle: {                    normal: {                        color: '#E01F54',                        lineStyle: {                            color: '#E01F54'                        }                    }                },                data: yCdata            },        });        var myChart2 = echarts.init(document.getElementById("echartsContainer2"));        myChart2.setOption({}, true);        myChart2.setOption(option = {            title: {},            tooltip: {                trigger: 'axis',                confine: true            },            legend: {                data: [strD]            },            grid: {                left: '3%',                right: '4%',                bottom: '3%',                containLabel: true            },            xAxis: {                type: 'category',                boundaryGap: false,                data: xdata.map(function (str) {                    return str.replace(' ', '\n')                }),                axisLabel: {                formatter: function (value, index) {                    var date = new Date(value);                    var texts = [(date.getMonth() + 1), date.getDate()];                    if (index === 0) {                        texts.unshift(date.getYear());                    }                    return texts.join('/');                }                }            },            yAxis: {                name: '价格(元)',                scale: true,                type: 'value',                position: 'left'            },            series: {                name: strD,                type: 'line',                smooth:true,                  stack: '总量',                itemStyle: {                    normal: {                        color: '#E01F54',                        lineStyle: {                            color: '#E01F54'                        }                    }                },                data: yDdata            },        });        window.onresize = function () {            var t = setTimeout(function () {            $('#searchbar').css('width', $('#body_container_right').innerWidth());                myChart.resize();                myChart1.resize();                myChart2.resize();            }, 300);        };    }