ECharts 使用series.axisLine. lineStyle.color设置仪表盘轴线颜色

最新推荐文章于 2025-03-20 16:26:38 发布

旭东怪

最新推荐文章于 2025-03-20 16:26:38 发布

阅读量9.1k

点赞数

分类专栏：图表库

本文链接：https://blog.youkuaiyun.com/qq_38974638/article/details/108899855

版权

本文介绍如何使用ECharts设置仪表盘组件的轴线颜色，并通过具体代码示例展示了如何将轴线分为不同颜色的多段。默认情况下，仪表盘轴线颜色分为三段，分别采用不同的颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 使用详解

series.axisLine. lineStyle.color

说明：设置轴线颜色。仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。

默认值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]。

参数类型：Array[][]。

2 原始效果图

3 实现代码（设置轴线颜色）

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
       option = {
			tooltip: {
				formatter: '{a} <br/>{b} : {c}%'
			},
			series: [
				{
					name: '业务指标&#