Echarts，如何使用数据系列来切换线条的颜色答案

【问题标题】：Echarts, how to use data series to switch color of lineEcharts，如何使用数据系列来切换线条的颜色
【发布时间】：2018-10-26 13:15:33
【问题描述】：

我想使用数据字段来更改某个图片的线条颜色。就像当它是 1 时，它应该是绿色的，当它是 2 时，它应该是黄色的。这个sn-p只是改变数据点的颜色，不改变线条？有没有机会用 echarts 存档？

<html>
	<head>

		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
	</head>
	<body>
	<div id="main_chart" style="width: 1200px;height:600px;"></div>

	<script type="text/javascript">

		// based on prepared DOM, initialize echarts instance
		var myChart = echarts.init(document.getElementById('main_chart'));

		var app = {};
		option = null;
		option = {
			xAxis: {
				type: 'category',
				data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']

			},
			yAxis: {
				type: 'value'
			},
			visualMap: {
			show: false,
			dimension: 2,
			pieces: [
				{
				lt: 2,
				gt: 0,
				color: 'green'
			}, {
				gte: 2,
				color: 'red'
			}
			
			
			]


		},
			series: [{


				data: [[1,37,1],[2,36,1],[3,36,2]],


				type: 'line',
				areaStyle: {}    
	 

			}]
		};

		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
	</script>


	</body>
	</html>

【问题讨论】：

标签： javascript echarts

【解决方案1】：

试试这个例子
1) 您应该使用正确的维度（xAxis、yAxis），更多信息请阅读文档
2) 如果要给整个区域上色，请从 areaStyle 中删除 color: "aquamarine"，然后它会被分段配置着色

<html>
  <head>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
  </head>
  <body>
  <div id="main_chart" style="width: 1200px;height:600px;"></div>

  <script type="text/javascript">

    // based on prepared DOM, initialize echarts instance
    var myChart = echarts.init(document.getElementById('main_chart'));

    var app = {};
    option = null;
    option = {
      xAxis: {
        type: 'category',
        data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']

      },
      yAxis: {
        type: 'value'
      },
      visualMap: {
      show: false,
      dimension: 0,
      pieces: [
        {
        lt: 2,
        gt: 0,
        color: 'green'
      }, {
        gt: 2,
        lt: 3,
        color: 'red'
      }, {
        gte: 3,
        color: 'yellow'
      }
      
      
      ]


    },
      series: [{


        data: [[1,37,1],[2,36,1],[3,36,2],[4,38,2]],


        type: 'line',
        areaStyle: {color: "aquamarine"}    
   

      }]
    };

    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>


  </body>
  </html>

【讨论】：

好的，但我希望只有 2 个部分，并在数据系列中区分线条的颜色。不幸的是，这只适用于数据点的颜色，而不适用于整条线。假设我有 1000 个数据点和 500 次我会更改颜色，那么 Pieces 部分会非常臃肿。
@selbolder 我找不到任何方法为第三维逐段着色。