echart图标区域背景

最新推荐文章于 2024-05-28 11:11:34 发布

一个打工仔的笔记

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量182

点赞数 1

分类专栏： echart 文章标签：前端 echarts

本文链接：https://blog.csdn.net/Web_Notes/article/details/138158201

版权

echart 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细展示了如何使用ECharts库在JavaScript中创建一个包含损耗曲线和区域标记的图表，包括配置项如X轴和Y轴标签、数据绑定、颜色设置以及区域划分的示例。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述
代码实例：

     let option = {
        calculable: true,
        legend: {
          orient: 'vertical',
          top: '10%',
          left: 'right'
        },
        tooltip: {
          show: true,
          formatter: '{a} {b} : {c} '
        },
        xAxis: [
          {
            type: 'category',
            data: Array.from({ length: 12 }).map((a, index) => `${index + 1}月`),
            axisLine: {
              //x轴线的颜色以及宽度
              show: true, //是否显示X轴
              lineStyle: {
                color: '#333'
              }
            },
            axisLabel: {
              // interval: 0,  //间隔几条显示
              // rotate: 20,  // 切斜度数
              fontSize: 12 //字体大小
            },
            axisTick: {
              //是否显示刻度线
              show: false
            }
          }
        ],
        yAxis: [
          {
            name: '哈哈哈',
            type: 'value',
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#333' //纵坐标刻度文字颜色
                // color: '#f2eded',//纵坐标刻度文字颜色
              }
            },
            splitLine: {
              //网格线
              show: true, //是否显示
              lineStyle: {
                //网格线样式
                color: 'rgba(192,192,192,0.2)', //网格线颜色
                width: 1, //网格线的加粗程度
                type: 'dashed' //网格线类型
              }
            }
          }
        ],
        // 整体大小
        grid: {
          left: '0%',
          right: '0%',
          top: '23%',
          bottom: '30',
          containLabel: true,
          borderColor: 'transparent'
        },
        series: [
          {
            name: '损耗曲线',
            type: 'line',
            data: lineData,
            symbolSize: 2, //设置圆点大小为10
            itemStyle: {
              color: '#FEFA00'
            }
            // areaStyle: {
            //   normal: {
            //     //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //       {
            //         offset: 0,
            //         color: 'rgba(254, 250, 0,0.2)'
            //       },

            //       {
            //         offset: 1,
            //         color: '#FEFA00'
            //       }
            //     ])
            //   }
            // } //区域颜色渐变
          },
          {
            name: '',
            type: 'bar',
            animation: false,
            areaStyle: {
              normal: {}
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            markArea: {
              silent:true,//不响应鼠标
              data: [
                [
                  {
                    // name: '事件执行时段',
                    itemStyle: {
                      color: 'rgba(190,76,89,0.5)' //颜色设置
                    },
                    yAxis: '0',
                    label: {
                      show: true,
                      position: ['1%', '45%'],
                      color: '#e5e5e5',
                      fontStyle: 'oblique',
                      fontSize: 15,
                      // rotate: 90,
                      formatter: '区域1'
                    },
                   
                  },
                  {
                    yAxis: '10'
                  }
                ],
                [
                  {
                    itemStyle: {
                      color: 'pink' //颜色设置
                    }, 
                    yAxis: '10',
                    label: {
                      show: true,
                      position: ['1%', '45%'],
                      color: '#e5e5e5',
                      fontStyle: 'oblique',
                      fontSize: 15,
                      // rotate: 90,
                      formatter: '区域2'
                    }
                  },
                  {
                    yAxis: '30'
                  }
                ],
                [
                  {
                    itemStyle: {
                      color: '#4ccacf' //颜色设置
                    }, 
                    yAxis: '30',
                    label: {
                      show: true,
                      position: ['1%', '45%'],
                      color: '#e5e5e5',
                      fontStyle: 'oblique',
                      fontSize: 15,
                      // rotate: 90,
                      formatter: '区域3'
                    }
                  },
                  {
                    yAxis: '45'
                  }
                ],
                [
                  {
                    itemStyle: {
                      color: 'green' //颜色设置
                    }, 
                    yAxis: '45',
                    label: {
                      show: true,
                      position: ['1%', '45%'],
                      color: '#e5e5e5',
                      fontStyle: 'oblique',
                      fontSize: 15,
                      // rotate: 90,
                      formatter: '区域4'
                    }
                  },
                  {
                    yAxis: '100'
                  }
                ]
              ]
            }
          }
        ]
      }