eCharts：如何更改正负值的线条颜色？

Question

我想在eCharts折线图上将图表下方（即介于零和值之间）的区域涂成正（绿色），将红色涂成负（红色）。

赞这个

我们已经在下面用条形图完成了，但是现在我们需要用折线图完成。

Answer 1

您可以通过设置visualMap属性来实现。我做了一些成功的尝试，并取得了以下成就。

 var myChart = echarts.init(document.getElementById('main'));

 option = {
   xAxis: {
     type: 'category',
     boundaryGap: false,
     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   },
   yAxis: {
     type: 'value'
   },
   series: [{
     data: [820, 932, 901, -1200, -800, 1330, 1320],
     type: 'line',
     areaStyle: {}
   }],
   visualMap: {
     left: 'right',
     min: 0,
     max: 1,
     inRange: {
       color: ['red', 'green']
     },
     text: ['>0', '<0'],
     calculable: true
   },
 };

 // use configuration item and data specified to show chart
 myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>