ECharts常用设置

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sweet_o/article/details/82732686

ECharts 设置折线颜色和小圆点颜色

series: [{
    name: "seriesName",
    type: "line",
    itemStyle: {
        normal: {
            color: "#2ec7c9", //设置小圆点颜色
            lineStyle: {
                color: "#2ec7c9" //设置折线颜色
            }
        }
    },
    data: [9550, 9700]
}]

Echarts 实现双y轴

yAxis: [{ 
	type: 'value',
	name: '元/吨',
	min: 7000,
	max: 10000,
	splitNumber:6,
	axisLabel: { //y轴字体色
		show: true,
		textStyle: {
			color: '#6e7f93'
		}
	},
	axisLine:{ //y轴坐标线
		lineStyle:{
			color:'#6e7f93',
			width:1,
		}
	}			          
},{ 
	type: 'value',
	name: '元/吨',
	min: 0,
	max: 750,
	splitNumber:6,
	axisLabel: { //y轴字体色
		show: true,
		textStyle: {
			color: '#6e7f93'
		}
	},
	axisLine:{ //y轴坐标线
		lineStyle:{
			color:'#6e7f93',
			width:1,
		}
	},
	axisTick:{
		show:false //是否显示坐标轴刻度
	}				
}]

series中通过字段yAxisIndex来指定应用哪个y轴，计数从0开始。

series: [{
            name: '价差',
            type: 'line',
            yAxisIndex: 1, //第二个y轴
            data: [10, 23, 58]
        }, {
            name: 'pp',
            type: 'line',
            data: [644183, 945711, 965962]
        }, {
            name: 'pe',
            type: 'line',
            data: [55096, 27366, 289103]
        }
}]

ECharts tooltip信息添加单位

tooltip: {
    trigger: 'axis',	
    showContent: true,
    axisPointer:{ //垂直指示线线条颜色
        lineStyle: {
            color: '#ccc',
            width: 1,
            type: 'solid'
        }
    },
    /*formatter:function(params){   //吨数加单位
       var relVal = params[0].name;  
       for (var i = 0, l = params.length; i < l; i++) {  
            relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value+"元/吨";  
        }  
       return relVal;  
    }  */
    formatter: function (params,ticket,callback) {
        var resDate = params[0].name;
        var res = '';
        var resRes = '';
        for (var i = 0, l = params.length; i < l; i++) {
            switch(params[i].seriesName) {
                case 'PP现货':
                    res += 'PP现货：' + '<span style="color: #e5481d;">';
                break;					
                case 'PP期货':
                    res += 'PP期货：' + '<span style="color: #6080e5;">';
                break;					
                case '价差':
                    res += '价差：' + '<span style="color: #bf89e1;">';
                break;
                default:
                break;
            }
            res += params[i].value + '</span>元/吨<br/>';
            resRes = resDate + '<br/>' + res;
        }
       return resRes;
      
    }//吨数字体变色	
},

ECharts 整体宽度放宽

grid: {
	width:"86%", //图表宽度放宽
	height:'65%'
}

ECharts 去掉拖拽重计算

calculable: false

ECharts x轴设置

xAxis: [{
    type: 'category',
    boundaryGap: false, //坐标轴两端空白策略
    splitLine:{
        show:false //去掉坐标轴在grid区域中的纵向分隔线
    },   
    axisLabel: { //x轴字体色
        show: true,
        textStyle: {
            color: '#6e7f93'
        }
    }, 
    axisLine:{ //x轴坐标线
        lineStyle:{
            color:'#6e7f93',
            width:1,
        }
    },				          
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}]