Echarts折线图中数据根据正负数显示不同区域背景色-配置-Toy模板网

这篇具有很好参考价值的文章主要介绍了Echarts折线图中数据根据正负数显示不同区域背景色-配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

示例

Echarts折线图中数据根据正负数显示不同区域背景色-配置,数据可视化,echarts,前端,javascript

Echarts折线图中数据根据正负数显示不同区域背景色文章来源地址https://www.toymoban.com/news/detail-805350.html

Piecewise 分段类型

Continuous 连续类型

Echarts配置

option = {
  backgroundColor: "#030A41",
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
      show: false,
    },
    axisLabel: {  //设置x轴坐标配置
            margin: 10,
            color: '#fff',  
            textStyle: {
                fontSize: 14
            },
        },
  },
  yAxis: {   //设置y轴坐标配置
    type: 'value',
    splitLine: {   
      show: true,  
      lineStyle: {
        color: '#132987',
      },
    },
    axisLabel: {  
            margin: 10,
            color: '#fff',  //y轴坐标文字颜色设置   
            textStyle: {
                fontSize: 14
            },
        },
  },
 visualMap: [
    {
      type: 'piecewise',
      show: false,
      pieces: [
        {
          lte: 0,   //数据<0配置
          color: 'rgba(255, 87, 87, 0.3)',  //设置区域背景色
        },
        {
          gte: 0.1,  //数据>0配置
          color: 'rgba(69, 215, 224, 0.3)',  //设置区域背景色
        },
      ],
      seriesIndex: 0,
    },
  ],
  series: [
    {
      data: [100,-100, -200, 224, 147, -260,100,200],
      type: 'line',
      smooth: true,
      symbol: 'none', //'circle' 圆点
      sampling: 'average',
      areaStyle: {}
      // itemStyle: {
      //   normal: {
      //     lineStyle: {
      //       width: 2,
      //       color: '#9DD3E8'
      //     }
      //   }
      // }
    }
  ]
};

完整使用

import * as echarts from 'echarts';

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

option = {
  backgroundColor: '#030A41',
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
      show: false
    },
    axisLabel: {
      //设置x轴坐标配置
      margin: 10,
      color: '#fff',
      textStyle: {
        fontSize: 14
      }
    }
  },
  yAxis: {
    //设置y轴坐标配置
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        color: '#132987'
      }
    },
    axisLabel: {
      margin: 10,
      color: '#fff', //y轴坐标文字颜色设置
      textStyle: {
        fontSize: 14
      }
    }
  },
  visualMap: [
    {
      type: 'piecewise',
      show: false,
      pieces: [
        {
          lte: 0, //数据<0配置
          color: 'rgba(255, 87, 87, 0.3)' //设置区域背景色
        },
        {
          gte: 0.1, //数据>0配置
          color: 'rgba(69, 215, 224, 0.3)' //设置区域背景色
        }
      ],
      seriesIndex: 0
    }
  ],
  series: [
    {
      data: [100, -100, -200, 224, 147, -260, 100, 200],
      type: 'line',
      smooth: true,
      symbol: 'none', //'circle' 圆点
      sampling: 'average',
      areaStyle: {}
      // itemStyle: {
      //   normal: {
      //     lineStyle: {
      //       width: 2,
      //       color: '#9DD3E8'
      //     }
      //   }
      // }
    }
  ]
};

option && myChart.setOption(option);

到了这里，关于Echarts折线图中数据根据正负数显示不同区域背景色-配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！