首页 > 其他分享 >echart 柱状图加短线

echart 柱状图加短线

时间:2023-07-06 16:12:23浏览次数:54  
标签:bar echart show color type 柱状图 false 短线 data

let data=[51, 58, 63, 57, 63, 40, 124,108, 63, 63]
          let max=Math.max.apply(null,data)*0.03
          let linedata=Array(data.length).fill(max)
          this.options = {
            grid: {
              left: 20,
              right: 20,
              bottom: "10",
              top: "18%",
              containLabel: true,
            },
            tooltip: {},
        xAxis: [
              /*横坐标*/
              {
                  axisTick: {show: false},
                  type: 'category',
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: "white",
                    },
                  },

                  data: ["内超", "锡超", "乌超", "呼和浩特", "包头", "乌兰察布", "锡林郭勒",'乌海','阿拉善','薛家湾'],
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              /*隐藏一个不显示的横坐标,用作横线的位置*/
              {
                  type: 'category',
                  axisLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      show: false
                  },
                  splitArea: {
                      show: false
                  },
                  splitLine: {
                      show: false
                  },
                  data: ["内超", "锡超", "乌超", "呼和浩特", "包头", "乌兰察布", "锡林郭勒",'乌海','阿拉善','薛家湾'],
              },
          ],
        yAxis: [
                  {
                    axisTick: {
                      show: false
                    },
                    splitLine: {
                      lineStyle:{
                        type:'dashed'//虚线
                    },
                    show: true //隐藏
                  },
                    type: "value",
                    name: '次',
                    // interval: 25,
                    splitNumber: 4, // 坐标轴的分割段数
                    axisLine: {
                      show: false,
                      lineStyle: {
                        color: "white",
                      },
                    },
                  }
            ],
        series: [
            {
              type: 'bar',
              barWidth:'30%',
              itemStyle: {
                normal: {
                    label: {
                        show: true, //开启显示
                        position: 'top',
                    // formatter: '{c}%',
                        textStyle: { //数值样式
                            color: "#FFFFFF",
                            // fontSize: 16,
                            // fontWeight: 600
                        }
                    },
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: '#1595fb'
                    }, {
                        offset: 1,
                        color: '#21346c'

                    }]),
                    // barBorderRadius:15

                }
            },
              data: data,
            },
            {
              /* 这个bar是撑起横线的高度,并设置透明*/
              // name: "盈亏平衡点",
              stack: 'breakevenEleGroup', /* 盈亏点数据组,需要设置才能将两个bar堆积在一起*/
              type: 'bar',
              xAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: 'rgba(0,0,0,0)'/* 设置bar为隐藏,撑起下面横线*/
                }
              },
              data: data,
            },
            {
              /* 这个bar是横线的显示*/
              // name: "盈亏平衡点",
              stack: 'breakevenEleGroup', /* 盈亏点数据组,需要设置才能将两个bar堆积在一起*/
              type: 'bar',
              barWidth:'30%',
              xAxisIndex: 1,
              barGap: '0',
              itemStyle: {
                normal: {
                  color: '#159aff'

                }
              },
              data:linedata
            }
          ]
          }

标签:bar,echart,show,color,type,柱状图,false,短线,data
From: https://www.cnblogs.com/7c89/p/17532469.html

相关文章

  • echarts 在使用dataZoom时报错,Cannot read properties of undefined (reading 'type')
    今天我再vue中使用柱状图拖动时,一直报错Cannotreadpropertiesofundefined(reading'type')。原因如下,我使用了myChart来接收数据,当myChart使用的是vue的ref或者reactive来命名的变量,如果这样子命名就会报上述错误。myChart=echarts.init(statistical......
  • 小程序使用echarts(二)
    一、在根据(一)进行使用时出现得问题 1、按照教程图表依旧不显示2、图表不跟随页面滑动二、解决办法(1)不显示1、应当引入插件2、查看父元素是否存在display:flex;属性;以及height:100%类似属性;也不能使用float(2)滑动1、不能存在(1)2中的display:flex;属性,以及图表的父元素不......
  • echarts,时间轴折线图,tooltip相关
    其中,data数组是通过echarts工具由表格直接转换得到:https://echarts.apache.org/zh/spreadsheet.html第一部分:datadata中的长串是由表格得到,由日期转为的时间戳形式,比如‘1636905600000’,是excel中的【2021/11/150:00:00】通过公示【=((C3-70*365-19)*86400-8*3600)*1000】得到1......
  • ChatGPT指令—饼图、柱状图、流程图
    今天分享生成图表的ChatGPT指令(提示词、Prompt),包括生成饼图、柱状图、流程图等。生成饼图指令:你现在是图形生成器,我将输入查询语言,你只显示该图像的预览,仅此而已。不要写解释,除非我指示你这样做,否则不要键入命令。当我需要用中文告诉你一些事情时,我会把文字放在大括号内{like......
  • Echart基本案例
    一、静态效果图 二,前期需要2.1、vue3项目,Echart引入2.2、原理解释略案例代码1:<template><divid="radarChart"style="width:100%;height:100%;"></div></template><scriptsetup>import*asechartsfrom'echarts'......
  • python 中pyecharts模块用法
    https://zhuanlan.zhihu.com/p/111330795#:~:text=bar1%3D(Bar().add_xaxis(['1月'%2C'2月'%2C'3月'%2C'4月'%2C'5月'%2C'6月'%2C'7月'%2C'8月'%2C'9月'%2C'10月'%2C'11月......
  • echarts超出外部div
    问题产生:先渲染dom后渲染数据解决方法:1可以延时渲染2监听resize事件that=this;window.addEventListener('resize',()=>{that.echartsA.resize();});window.removeEventListener('resize',that.echartsA.resize());......
  • echarts绘制地图使用dispatchAction方法高亮区域
    1.高亮方法代码如下:highlightMap(myChart){//高亮轮播展示varindex=0;this.timer=null;this.timer=setInterval(()=>{myChart.dispatchAction({type:'downplay',//取消高亮seriesIndex:0})myChart.dispatchAction({......
  • elementui admin项目中使用echarts
    1.引入依赖npminstallecharts--save2.在template中写<template>  <div>   <el-card>    <divid="mychart":style="{height:height,width:width}"></div>   </el-card>  </div></t......
  • Echarts创建中国3D地图
    Echarts创建中国3D地图客户需要做一版3D中国地图,地图要倾斜角度,然后可以支持点击省份,对地图两侧的图表数据进行切换,此外还有一些纹理,顶牌信息面板的效果,不一一赘述,末尾我会放一张成品的图片。地图数据Echarts官网迁移后,地图的json数据已经不翼而飞了,所以在开发地图图表时,要先找......