echarts 根据y轴的大小改变折线颜色的效果

最新推荐文章于 2023-03-31 14:27:44 发布

god_yu_

最新推荐文章于 2023-03-31 14:27:44 发布

阅读量330

点赞数

文章标签： js 数据可视化 echarts

本文链接：https://blog.csdn.net/Zero_zero1/article/details/119420780

版权

<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-sections
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;



option = {
   title: {
      text: '数据统计',
      left: 'right'
    },
    // color: ["#6ABD79"],
    legend: {
      data: ['温度'],
      top: 20,
      left: 'center',
      backgroundColor: '#dbdbdb',
      z: 100
    },
    grid: {
        left: 0,//折线图距离左边距
        right: 50,//折线图距离右边距
        top: 30,//折线图距离上边距
        bottom: 10,
        containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      name: '时间',
      type: 'category',
      boundaryGap: false,
      data: ['0','3', '6', '9', '12', '15', '18', '21', '24'],
      axisTick: {
        alignWithLabel:false
      },
      axisLabel: {
        //横坐标最后的标注颜色变深
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      show: true
    },
    yAxis: {
      name: '温度',
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'solid'
        }
      },
      //设置y轴字体样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      show: true
    },
    series: [{
      type: 'line',
      smooth: true,
      data: [23,34,35,33,34,33,31,19,10,20],
    }],
    visualMap: {
      type: 'piecewise',
      show: false, 
      dimension: 1,  // 1 -根据y数据,0- 根据x 数据
      seriesIndex:0, //第一部分数据  
      pieces: [{
          lte: 10,
          color: 'orange'
      }, {
          gt: 10,
          lte: 20,
          color: 'red'
      }, {
          gt: 20,
          lte: 30,
          color: '#6ABD79'
      }, {
          gt: 30,
          color: 'pink'
      }]
  }

};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>

god_yu_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts 根据y轴的大小改变折线颜色的效果

<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> </head> <b
复制链接

扫一扫