ECharts实现曲线分段不同颜色显示

最新推荐文章于 2024-05-14 08:15:58 发布

缘如风

最新推荐文章于 2024-05-14 08:15:58 发布

阅读量4.3k

点赞数 5

分类专栏： Web

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/104499808

版权

Web 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

实现曲线不同线段的不同样色。如下图

采用的visualMap实现的。具体代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./dist/echarts.min.js"></script>
    <style type="text/css">
        *{
        margin:0px;
        padding:0px;
        }
        
        html,body{
        height:100%;
        }
    
        </style>
</head>
<body style="height: 100%;">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 80%;height:80%;top: 10%;left: 10%;  "></div>
</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
   
    var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
    var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    visualMap: {
            top: 10,
            right: 10,
            pieces: [{
                gt: 600,
                lte: 900,
                color: '#096'
            }, {
                gt: 900,
                lte: 1200,
                color: '#ffde33'
            },
            {
                gt: 1200,
                lte: 1500,
                color: '#ff0000'
            }]
        },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
     }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    
   

</script>

</html>

官方文档 https://www.echartsjs.com/zh/option.html#visualMap-piecewise

相关说明：

visualMap-piecewise. pieces

Array

自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。例如：

pieces: [
    {min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。
    {min: 900, max: 1500},
    {min: 310, max: 1000},
    {min: 200, max: 300},
    {min: 10, max: 200, label: '10 到 200（自定义label）'},
    {value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
    {max: 5}     // 不指定 min，表示 min 为无限大（-Infinity）。
]

或者，更精确得，可以使用 lt（小于，little than），gt（大于，greater than），lte（小于等于 lettle than or equals），gte（大于等于，greater than or equals）来表达边界：

pieces: [
    {gt: 1500},            // (1500, Infinity]
    {gt: 900, lte: 1500},  // (900, 1500]
    {gt: 310, lte: 1000},  // (310, 1000]
    {gt: 200, lte: 300},   // (200, 300]
    {gt: 10, lte: 200, label: '10 到 200（自定义label）'},       // (10, 200]
    {value: 123, label: '123（自定义特殊颜色）', color: 'grey'},  // [123, 123]
    {lt: 5}                 // (-Infinity, 5)
]

缘如风

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
ECharts实现曲线分段不同颜色显示

实现曲线不同线段的不同样色。如下图采用的visualMap实现的。具体代码如下<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title>  ...
复制链接

扫一扫