echarts（一）自定义配置

青旅半醒 2022-06-10 03:55 366阅读 0赞

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);
            };
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，366人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 地图自定义区域

参考 [这位大佬感谢][Link 1] https://blog.csdn.net/sinat\_41904410/article/details/115697802?

客官°小女子只卖身不卖艺/ 2023年01月16日 02:47/ 0 赞/ 170 阅读

相关 echarts自定义样式

一、柱状图x、y轴：（1）实现隐藏x轴，y轴，刻度线，网格 yAxis: { show: true, type: 'value',

迷南。/ 2022年12月15日 03:39/ 0 赞/ 289 阅读

相关 echarts自定义地图

先看看效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

亦凉/ 2022年10月08日 15:19/ 0 赞/ 254 阅读

相关 Echarts - 引入自定义主题方案（Vue配置示例）

前言 > 很多时候，我们不会直接使用 `Echarts` 默认的样式，而是自家设计师有一套主题样式。通过每个配置项手动去改样式，显然不是明智之举，不仅代码冗余，还浪费

秒速五厘米/ 2022年09月01日 12:58/ 0 赞/ 377 阅读

相关 echarts（一）自定义配置

1、图片自适应重绘 window.onresize = function () { myChart.resize(); //使第一个图表适应

青旅半醒/ 2022年06月10日 03:55/ 0 赞/ 367 阅读

相关 echarts，toolbox自定义方法，toolbox部分自定义方法

toolbox自定义方法， toolbox: { show: true,

蔚落/ 2022年03月21日 03:07/ 0 赞/ 615 阅读

相关 echart 图表自定义样式

initChart: function (id) { this.charts = echarts.init(document.getElemen

我不是女神ヾ/ 2021年12月09日 07:59/ 0 赞/ 465 阅读

相关 echarts 自定义legend，线性渐变

先看效果图，业务要求：一次最多两个系列，去掉最开始的系列不管是用原生 jquery vue react基本思路都是：改变 series clear() 再setO

向右看齐/ 2021年09月20日 01:16/ 0 赞/ 1195 阅读

相关 echart自定义tooltip

给echart的tooltip数据提示部分增加单位 tooltip: { trigger: 'axis', axisPoi

青旅半醒/ 2021年07月26日 17:41/ 0 赞/ 797 阅读

相关 echart自定义主题

(function (root, factory) { if (typeof define === 'function' && define.amd)

不念不忘少年蓝@/ 2021年07月26日 15:25/ 0 赞/ 670 阅读