ECharts 根据不同的X轴区域，设置不同区域的背景色

最新推荐文章于 2024-10-31 08:53:39 发布

weixin_34380781

最新推荐文章于 2024-10-31 08:53:39 发布

阅读量7.7k

点赞数

文章标签： javascript c# ViewUI

原文链接：https://juejin.im/post/5cadb2736fb9a06879444d11

版权

本文介绍如何使用ECharts库，在JavaScript中根据不同X轴区域设定独特的背景色，增强数据可视化的表现力。同时提及可能涉及的C#后台处理。

摘要由CSDN通过智能技术生成

let myChart = echarts.init(document.getElementById(idName));
	let option = {
		tooltip: {
			trigger: 'axis',
			backgroundColor: '#FFFFFF',
			borderColor: '#D9D9D9',
			lineHeight: 17,
			axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
			},
			textStyle: {
				color: '#4d4d4d',
				fontSize: 12,
			},
			extraCssText: 'box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1)',
		},
		xAxis: {
			boundaryGap : false,
			axisLine: {onZero: false},
			data: ['2009/6/13', '2009/6/14', '2009/6/15', '2009/6/16', '2009/6/17', '2009/6/18', '2009/6/19', '2009/6/20']
		},
		yAxis: {
			type: 'value'
		},
		dataZoom: [
			{
				show: true,
				start: 55,
			},