echart图标区域背景

一个打工仔的笔记

于 2024-04-24 14:28:50 发布

阅读量278

点赞数 1

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

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

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

     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
            }
          }
        ]