echarts疑难杂症

已于 2022-06-27 10:08:12 修改
阅读量807 收藏 3
点赞数 2
分类专栏： 工作笔记 文章标签： echarts 前端 javascript
于 2022-02-25 16:05:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44247866/article/details/123128337
版权

文章目录

1.标注最大值最小值，区域渐变，设置高亮区域

在这里插入图片描述

option = {
  title: {
    text: '标题',
    left: 'center',
    textStyle: {
      fontSize: '24',
      fontWeight: 'normal'
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: [
      '02/01',
      '02/02',
      '02/03',
      '02/04',
      '02/05',
      '02/06',
      '02/07',
      '02/08',
      '02/09',
      '02/10',
      '02/11',
      '02/12',
      '02/13',
      '02/14',
      '06/15',

    ],
    axisLabel: {
      fontSize: 20
    }
  },
  yAxis: {
    type: 'value',
    name: '用电指数',
    nameTextStyle: {
      fontSize: 20
    },
    axisLabel: {
      fontSize: 20
    }
  },
  series: [
    {
      data: [
        '0.99',
        '2.08',
        '1.14',
        '1.02',
        '0.90',
        '0.55',
        '1.97',
        '1.08',
        '1.46',
        '1.48',
        '1.58',
        '0.66',
        '0.59',
        '0.53',
        '0.70',
        
      ],
      type: 'line',
      color: '#45C0F7',
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#45C0F7' },
            { offset: 0.5, color: '#45C0F7' },
            { offset: 1, color: 'white' }
          ])
        }
      }, //填充区域样式 蓝色渐变
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' }
        ]
      }, //显示最大值 最小值
      markArea: {//标注特殊区域 设置颜色
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
        data: [
          [
            {
              name: '',
              xAxis: '02/05'
            },
            {
              xAxis: '02/06'
            }
          ],
          [
            {
              name: '',
              xAxis: '02/12'
            },
            {
              xAxis: '02/13'
            }
          ],
          
        ]
      }
    }
  ]
};
2.x轴竖版显示，柱状图渐变色

在这里插入图片描述

option = {
  title: {
        text: 'title-text',
        left: 'center',
        textStyle: {
          fontSize: 26,
          fontWeight: 'normal',
        },
      },
      tooltip: {
        trigger: 'axis',
        formatter: '{b}：{c}',
      },
      xAxis: {
        type: 'category',
        data: ["朝阳区", "怀柔区", "房山区", "昌平区", "西城区", "延庆区", "密云区", "海淀区"],
        tooltip: {
          trigger: 'axis',
        },
        axisLabel: {
          fontSize: 17,
          formatter: function (value) {
            //x轴的文字改为竖版显示
            var str = value.split('');
            return str.join('\n');
          },
        },
      },
      yAxis: {
        type: 'value',
        name: '增幅企业数量(家)',
        nameTextStyle: {
          fontSize: 16,
        },
        axisLabel: {
          fontSize: 20,
        },
      },
      series: [
        {
          data: [2,3,1,5,2,5,4,3],
          type: 'bar',
          barWidth: '20px',
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
              },
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: '#fff',
                  },
                  {
                    offset: 0.6,
                    color: '#45C0F7',
                  },
                  {
                    offset: 1,
                    color: '#45C0F7',
                  },
                ],
                false
              ),
            },
          },
        },
      ],
    
};
3.实现横向柱状图

在这里插入图片描述

let histo1 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      top: '-10%',
      left: '22%',
      data: ['大兴区'],
      itemWidth: 0,
      textStyle: {
        fontWeight: 'normal',
        fontSize: '15',
        color: '#fff',
        textAlign: 'center',
      },
    },
    grid: {
      width: '75%',
      top: '0%',
      left: '5%',
      right: '0%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      // boundaryGap: [0, 0.01],
      show: false,
      splitLine: {
        // 网格线
        show: false,
      },
      axisTick: {
        //y轴刻度线
        show: false,
      },
      axisLine: {
        //轴线
        show: false,
      },
    },
    yAxis: {
      type: 'category',
      data: className,
      splitLine: {
        // 网格线
        show: false,
      },
      axisTick: {
        show: true,
        inside: true,
        length: 5,
        lineStyle: {
          color: '#8ad474',
          width: 2,
        },
      },
      axisLabel: {
        show: true,
        interval: 0,
        color: '#fff',
        fontSize: 15,
        padding: [10, 5, 10, 10],
        formatter: function (value, i) {
          return `{title|${className[i].title}} ${className[i].value ? `{value|${className[i].value}}` : ''}`;
        },
        rich: {
          title: {
            fontSize: 14,
            padding: 0,
            margin: 0,
            left: 10,
            bottom: 0,
            top: 0,
            right: 0,
          },
          value: {
            fontSize: 14,
            verticalAlign: 'bottom',
            padding: 0,
            margin: 0,
          },
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#8ad474',
          width: 2,
        },
      },
    },
    series: [
      {
        // name: '大兴区',
        type: 'bar',
        data: dataDaxing,
        left: '1%',
        right: '1%',
        bottom: '1%',
        top: '10%',
        barWidth: 10,
        barGap: '5%',
        itemStyle: {
          color: '#8ad474',
        },
        label: {
          //数据
          show: true,
          position: 'right',
          color: '#8ad474',
          textStyle: {
            fontWeight: 'normal',
            fontSize: '15',
            fontWeight: 700,
            textAlign: 'center',
          },
        },
      },
    ],
  };
  let histo2 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      top: '5%',
      right: '10%',
      data: ['北京市'],
      itemWidth: 0,
      textStyle: {
        fontWeight: 'normal',
        fontSize: '15',
        color: '#fff',
        textAlign: 'center',
      },
    },
    grid: {
      width: '60%',
      top: '0%',
      right: '0%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      // boundaryGap: [0, 0.01],
      inverse: true,
      show: false,
      splitLine: {
        // 网格线
        show: false,
      },
      axisLine: {
        //轴线
        show: true,
        lineStyle: {
          color: '#318ef1',
        },
      },
    },
    yAxis: {
      type: 'category',
      data: ['', '', '', '', '', ''],
      splitLine: {
        // 网格线
        show: false,
      },
      axisTick: {
        show: true,
        inside: false,
        length: 5,
        lineStyle: {
          // color: "#8ad474",
          width: 2,
        },
      },
      axisLabel: {
        show: true,
        interval: 0,
        color: '#fff',
        fontSize: 15,
        padding: [10, 5, 10, 10],
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#318ef1',
          width: 2,
        },
      },
    },
    series: [
      {
        // name: '北京市',
        type: 'bar',
        data: data,
        barWidth: 10,
        itemStyle: {
          color: '#318ef1',
        },
        label: {
          //数据
          show: true,
          position: 'left',
          color: '#318ef1',
          textStyle: {
            fontWeight: 'normal',
            fontSize: '15',
            fontWeight: 700,
            textAlign: 'center',
          },
        },
      },
    ],
  };



return(
 <div className="left-b-left-histograms">
        <div className="left-b-left-histogram-daxing">
          <MapEcharts chartsOption={histo2} />
        </div>
        <div className="left-b-left-histogram-beijing">
          <MapEcharts chartsOption={histo1} />
        </div>
      </div>
)
4.两个legend，legend表示柱状图颜色

在这里插入图片描述

option = {
  color:['blue','green','yellow','orange','red'],
  legend:[{
    data:['1-2','3-4','4-5','5-6'],
  orient: 'vertical',
  right:'right',
  top:'center',
   itemGap: 30,
  },{
  data:['未检测'],
  top:'top',

   itemGap: 30,
  }],
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      name:'0-1',
      barWidth:50,
       itemStyle: {
            normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
              
                // 定制显示（按顺序）
                color: function(params) { 
                  console.log('params',params)
                    var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; 
                    return colorList[params.dataIndex] 
                }
            },
        },
    },
     {
      data: [],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      name:'1-2',
       barWidth:0
    },
     {
      data: [],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      name:'3-4',
         barWidth:0
    },
        {
      data: [],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      name:'4-5',
         barWidth:0
    },
     {
      data: [],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      name:'5-6',
         barWidth:0
    },
     {
      data: [],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      name:'未检测',
         barWidth:0
    },
  ]
};
5.高亮区域设置legend

在这里插入图片描述

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  legend: {},
  series: [
    {
      name: '11',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name: '22',
      data: [],
      type: 'bar',
      markLine: {
        data: [{ xAxis: 'Wed' }],
        label: {
          normal: { show: false },
          emphasis: { show: false }
        },
        lineStyle: {
          emphasis: {
            type: 'solid',
            opacity: 0.8,
            color: 'blue',
            width: 20
          },
          normal: {
            type: 'solid',
            opacity: 0.4,
            color: 'red',
            width: 20
          }
        }
      }
    }
  ]
};
6.仪表盘 指针处展示数值

仪表盘，只有指针处展示数值，其他刻度不展示，下面数值也不能消失。
在这里插入图片描述
在这里插入图片描述

option = {
  series: [
    {
      type: 'gauge',
      progress: {
        show: true,
        width: 18
      },
      axisLine: {
        lineStyle: {
          width: 18
        }
      },
      axisTick: {
        show: false
      },
      splitNumber:100,
      splitLine: {
        length: 15,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      axisLabel: {
        distance: 25,
        color: '#999',
        fontSize: 20,
        formatter:function(value){
          if(value==28){
            return value
          }else{
            return ''
          }
        }
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 25,
        itemStyle: {
          borderWidth: 10
        }
      },
      detail: {
        valueAnimation: true,
        fontSize: 80,
        offsetCenter: [0, '70%']
      },
      data: [
        {
          value: 28
        }
      ]
    }
  ]
};
7.柱状图根据数值每个注展示不同的颜色，legend设置为实心

在这里插入图片描述
getBgColorForHour1New方法：
根据传进去的污染物id和数值，返回一个对象，包含应该展示的颜色

{
            title: [
              {
                text: [
                  i.name,
                  `{a|${pollutionType.name}}`,
                  `{b|${pollutionType.subName}}`,
                  '达标曲线图',
                ].join(''),
                left: 20,
                textStyle: {
                  fontWeight: 180,
                  fontSize: 15,
                  rich: {
                    a: {
                      fontSize: 14,
                    },
                    b: {
                      fontSize: 8,
                      verticalAlign: 'bottom',
                    },
                  },
                },
              },
              {
                text:
                  '累计浓度:' +
                  i.cumulative_value_single +
                  '  目标浓度:' +
                  i.target_value_single +
                  '  剩余浓度:' +
                  (i.residual_control_single > 0
                    ? i.residual_control_single
                    : '无法完成'),
                left: 350,
                textStyle: {
                  fontSize: 12,
                  fontWeight: 550,
                },
              },
            ],
            tooltip: {
              trigger: 'axis',
            },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            xAxis: {
              type: 'category',
              axisLine: { lineStyle: { color: fontColor } },
              data: i.time,
            },
            legend: {
              bottom: '2%',
              textStyle: { color: fontColor },
            },
            grid: {
              bottom: '24%',
              top: '14%',
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                color: '#9ec7e7',
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: fontColor,
                },
              },
            },
            series: [
              {
                name: '日浓度',
                data: i.initial_value,
                type: 'bar',
                itemStyle: {
                  normal: {
                    color: function (params) {
                      return getBgColorForHour1New(params.value, data.var_id)
                        .backgroundColor;
                    },
                  },
                },
              },
              {
                name: '累计浓度',
                data: i.cumulative_value,
                type: 'line',
                symbol: 'circle',//legend设置为实心
                itemStyle: {
                  color: '#f90000',
                },
              },
              {
                name: '目标浓度',
                data: i.target_value,
                type: 'line',
                symbol: 'circle',
                itemStyle: {
                  color: '#feff00',
                },
              },
              {
                name: '剩余控制',
                data: i.residual_control,
                type: 'line',
                symbol: 'circle',
                itemStyle: {
                  color: '#fb7f00',
                },
              },
            ],
          };
_语墨
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts 仪表盘 常用配置（数值范围/多个指针/指针差异）
weixin_42448623的博客
10-12 8908
文章目录特点使用常用配置数值范围 min max多个指针多个指针差异 特点 主要用于在进度把控以及数据范围的检测 可以更直观的表现某个指标的进度或实际情况 使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
ECharts可视化基础——柱状图
wmoxie的博客
04-06 5425
ECharts可视化基础 1．ECharts可视化步骤 ECharts可视化分为5步，分别为： ①步骤1：引入echarts.js文件 需在head标签内引入js文件，我们需要通过script标签中的scr属性来给外部脚本文件规定一个路径。 ②准备容器 我们需要准备一个呈现图表的盒子，通常我们是在div标签内规定一个区域来呈现图表。 ③初始化ECharts实例对象 我们在script标签内，通过echarts.init的方法实例化echarts对象，使用init中的document.getElementBy
【ECharts】仪表盘指针自定义形状
ChaoChao66666的博客
10-16 2552
【ECharts】仪表盘指针自定义形状
Echarts——自定义仪表盘图表
相濡以沫不如相望于江湖，是望着你不是忘了你。
09-16 3798
我个人本身其实没有从事多久大数据可视化开发这方面，碰到那种没见过的图表都会很慌，然而怕什么来什么…给大家看下给到我的设计图长什么样子看到这个图表之后我就去echarts官网上面去找有没有，相必大家也猜到了，那必然是没有的，之后花了很长时间去写这个东西，就想着记录一下，后面工作用到了就不用麻烦了废话不多说了，直接上代码option = {// formatter: "{a} {b} : {c}%", } , series : [ // 最外层蓝色 {
ECharts仪表盘(详细示例——附有具体注释)
故里的博客
08-31 2472
ECharts仪表盘(详细示例——附有具体注释)
把脉linux的疑难杂症
01-19
你只会windows？你真是OUT了，身为电脑开发者或者嵌入式设计的工程师而言学习linux是非常重要的。学习任何东西都是需要简化的步骤，看透彻规律，我在学习linux过程中觉得linux对于分区的要求以及命名，是重要的，...
浅析电脑疑难杂症 jp.docx
10-13
浅析电脑疑难杂症
windows安装卸载疑难杂症解决包
10-19
此程序是一个针对 Windows 操作系统的诊断程序。这个文件通常用于识别和解决安装或卸载 Microsoft 产品时出现的问题。它可以帮助用户修复由于安装或卸载过程中出现的错误而导致的软件相关问题。...
以COM对象处理Excel疑难杂症
07-21
处理Excel疑难杂症时，可能会遇到以下几种情况： 1. **错误处理**：在使用COM对象时，可能会遇到文件已被其他进程占用、路径错误等问题。我们需要捕获并处理这些异常，确保程序的稳定运行。 2. **性能优化**：大量...
Java 疑难杂症_笔记.pdf
03-17
Java疑难杂症笔记
echarts仪表盘样式设置
JHLIN的博客
11-07 9555
function fillpan(obj){ var myChart1 = echarts.init($(obj.id)[0]); var option = { backgroundColor: "#ffffff", title: { text: obj.text, left:'center', //标题位置 ...
echarts仪表盘的详细绘制
weixin_45372418的博客
12-26 1296
【代码】echarts仪表盘的详细绘制。
echarts的guage仪表盘样式
程序媛的博客
03-28 953
echarts的仪表盘的样式。
echarts仪表盘进度条、指针动态渐变色显示
stay hungry, stay foolish
05-30 4370
echarts仪表盘进度条、指针动态渐变色显示
echarts仪表盘遇到的一个问题
Hexin666的博客
07-19 1425
echarts仪表盘最大值的问题
echarts案例之仪表盘如何单独设置指针颜色？
最新发布
i-cat的博客
10-25 1193
自定义仪表盘样式
echarts双y轴对齐
wfly blog
08-04 1462
var colors = [’#5470C6’, ‘#91CC75’, ‘#EE6666’]; option = { color: colors, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, legend: { data: ['蒸发量', '降水量', '平均温度'] }, xAxis: [ { type: 'category',
Echarts数据可视化全解注释
S‘blog
10-24 638
Echarts数据可视化全解注释 Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解（点击进入）： title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解 5大坐标系详解（点击进入）： 地理坐标系geo详解、gr...
自定义echarts仪表盘去掉指针
南北极之间
09-22 5270
如图： 代码： option = { //提示框组件。开发实际中去掉了指针，提示框可以不用设置。 tooltip: { formatter: "{a} <br/>{b} : {c}%" }, //工具栏。本次好像也没用到，刷新，下载，我觉得还是挺实用的，具体开需求！ toolbox: { feature: { resto
docker疑难杂症
09-06
在使用Docker时，可能会遇到一些疑难杂症。其中，一些常见的问题及解决办法如下： 1. 运行docker version时报错"Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?"这个错误通常是由于Docker守护进程未启动引起的。可以通过运行以下命令来启动守护进程：`sudo systemctl start docker`（适用于基于systemd的Linux发行版）。如果您不是使用systemd，请根据您的操作系统和版本来启动Docker守护进程。 2. 使用yum安装Docker时报错"Cannot retrieve metalink for repository: epel. Please verify its path and try again."这个错误通常是由于epel源（Extra Packages for Enterprise Linux）未正确安装或配置引起的。您可以尝试以下解决办法： - 首先，确保您的系统与互联网连接正常。 - 检查您的操作系统和版本，并根据官方文档正确安装epel源。 - 如果您已经安装了epel源，但仍然遇到这个错误，请尝试更新epel源并再次运行安装命令。 这些是一些常见的Docker疑难杂症及其解决办法。当然，Docker的使用过程中可能还会遇到其他问题，您可以参考官方文档、社区论坛或搜索引擎来寻找更多解决办法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [docker 疑难杂症](https://blog.csdn.net/weixin_33805992/article/details/92266045)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [docker常见疑难杂症](https://blog.csdn.net/weixin_45776707/article/details/103142818)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值