Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >柱状图

柱状图

作者头像
onety码生
发布于 2020-09-16 03:20:40
发布于 2020-09-16 03:20:40
1.1K00
代码可运行
举报
文章被收录于专栏:码生码生
运行总次数:0
代码可运行

柱状图

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let option = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
          type: 'none'        // 默认为直线,可选为:'line' | 'shadow'
        },
        formatter(p) {
          return p[0].data.showText
        }
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['该车型', '同价位车型'],
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: ['#ffffff']
            }
          },
          axisLine:{
            lineStyle:{
              color: '#eeeeee'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666'
            }
          }
        }
      ],
      yAxis: [
        {
          max,
          // 值展示的类型,value直接展示value,category可以展示自定义
          type: 'value',
          show: false,
          interval,
          // 轴线上凸出来的点线
          axisTick: {
            show: false
          },
          // 坐标轴轴线相关设置
          axisLine: {             
             // 是否显示坐标轴轴线
            show: false,        
          },
          // 轴线文本
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666'
            }
          },
          /// 影响网格线
          splitLine: {
            show: true,
            lineStyle:{
              color: ['#eeeeee'],
              width: 1,
              type: 'solid'
            }
          }
        }
      ],
      series: [
        {
          type: 'bar',
          ccc: '60%',
          // 内部或者顶部可以展示文本
          label: {
            show: true,
            position: 'insideRight'
          },
          data: [{
            showText: '经销商报价:20-15万\n经销商数量:8家',
            name: 'hello',
            value: 20
          }, 15, 30, 1, 5, 8, 12],

                show: true,     //开启显示
                position: 'top',    //在上方显示
                textStyle: {        //数值样式
                  color: '#333',
                  fontSize: 14,
                  fontWeight: 500
                }
              },
          /// 轴风格配置
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [{
                offset: 0,
                color: '#00B8B0'
              }, {
                offset: 1,
                color: '#0C98E7'
              }]),
              barBorderRadius: [3, 3, 0, 0]
            }
          }
        }
      ],

    };
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
折线图
initChart(canvas, width, height, dpr) { const max = 100; const min = 25; const interval = 25; const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // 像素 }); canvas.setChart
onety码生
2020/09/18
1.4K0
大数据工程师必备之数据可视化技术
也有其他类的软件做可视化:一则使用,一则是开发。使用有成品的软件可以使用,一些SPSS软件、Tableau。开发使用的是echarts、Hights、D3等一些可视化的工具和库。
张哥编程
2024/12/13
5720
大数据工程师必备之数据可视化技术
echarts图 示例
版权声明:Copyright © https://blog.csdn.net/zzw19951261/article/details/84774183
zhengzongwei
2019/07/30
6020
echart图表demo
<!DOCTYPE html> <html> <head> <title>echarts</title> </head> <script src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script>
samRsa
2025/02/24
820
echart图表demo
如何使你的Echarts图表更具有观赏性和实用性?
前面有文章,讲述了Vue中封装Echarts组件,但都是直接上代码,没有具体对代码进行讲述。今天我们就来看看,如何使Echarts图表更美观,都是那部分属性使其更惊艳的。
Javanx
2019/09/04
2.5K0
如何使你的Echarts图表更具有观赏性和实用性?
浅谈Echarts 使用配置
官方文档 一、Echarts折线图的配置 (1)去掉折线图的边框线及其加入阴影效果 lineStyle: { normal: { type: 'solid', /*color:"#28a5fc",*/ color:"red", opacity :"0.5" } } 如下图所示: ---- (2)设置移动折线图的 “上下左右” 的位置 代码片段: grid:{ x:40, y:20, x2:20, y2:6
White feathe
2021/12/08
8980
浅谈Echarts 使用配置
echarts 特殊柱状图
特殊规则柱状图 如下代码实现: option = { "backgroundColor": "#171A2A", "tooltip": { "trigger": "axis", "axisPointer": { "show": true, "type": "shadow", "lineStyle": { "type": "shadow" }, "z": 0, "label": { "show": true, "color": "#f
White feathe
2021/12/08
9660
echarts 特殊柱状图
【ECharts】圆角堆积柱状图的实现
需求 生成一个堆积柱状图,在顶部显示汇总数据 代码 先设置堆积柱状图 再设置透明的柱状图,向后偏移100%,置底 // 0. 准备数据 let stockData = [ { name: '管理人1', value: 247, }, { name: '管理人2', value: 321, }, { name: '
且陶陶
2023/04/12
8520
【ECharts】圆角堆积柱状图的实现
用Echarts图表分析巴西队历年战绩
2022年在结束的卡塔尔世界杯八分之一决赛中,巴西队以4:1轻松战胜韩国队,连续八届世界杯晋级八强,我的心情无比的激动,看着自己喜欢的球星,内心十分骄傲。
不叫猫先生
2023/11/22
2820
用Echarts图表分析巴西队历年战绩
用Python分析BOSS直聘的薪资数据,年后找工作有方向了!
数据来源于BOSS直聘,说实话,现在的招聘网站,做的比较好的还是BOSS直聘,其相关的数据、报告等都是比较有代表性的。今天我们就来看看相关的数据吧!
周萝卜
2021/02/25
5410
用Python分析BOSS直聘的薪资数据,年后找工作有方向了!
echarts展示箱型图&正态分布曲线
效果图: 直接上代码吧: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #main {
用户1141560
2019/05/24
3.4K0
【Echarts】极坐标系下的柱状图实现圆角环状进度条
用普通的环状图无法实现圆角,需要使用柱状图的极坐标系,代码如下: var option = { title: { text: '88%', textStyle: { color: '#333', fontSize: 16, }, subtext: '市场占比', subtextStyle: { color: '#333'
且陶陶
2023/04/12
1.3K0
【Echarts】极坐标系下的柱状图实现圆角环状进度条
Echarts属性
Echarts折线图属性设置大全 // 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700', '#6699FF'
程序员不务正业
2020/11/24
2.3K0
mpvue——引入echarts图表
mpvue中引入使用echarts就是这么简单且github的仓库中大部分的demo都可以直接修改使用比较方便吧,主要是之前使用过echarts所以更改起来也非常的舒服!
思索
2024/08/16
1230
mpvue——引入echarts图表
Echarts数据可视化全解注释
github地址:https://github.com/626626cdllp/echarts
全栈程序员站长
2022/09/09
11.4K0
vue项目:重温echart图表库,折线加柱状图。
最近的项目又用到了图表库,这个艰巨的任务又交到了我手上,一年没有碰过echats了,时间久了反而手生。发个博客纪念下。
江一铭
2022/06/16
4500
vue项目:重温echart图表库,折线加柱状图。
Echarts中常用的参数总结以及参数自定义示例
本文主要讲解使用Echarts时setOption里面的属性以及常见的问题,参数都是本人项目里的具体参数。设置内容都是在 setOption({ })中。
星辰大海c
2023/11/15
9920
❗ 帅小伙花了一个小时,竟把图书馆智慧大屏模仿的有模有样!妙啊~
帅小伙去图书馆划水,进门的时候被图书馆门口的大屏震惊了,这玩意我也会哈哈哈哈,于是就给它拿下!结果,帅小伙在写博客的时候发现,照片上刚好有帅小伙的名字,帅小伙直呼:“帅啊(妙啊)”
小丞同学
2021/08/16
5040
echart渐变折线图,立体柱状图,发光饼图,月份图等
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> </head> <body> <div id=main style="height: 900px;width: 900px;"></div> <sc
天天Lotay
2022/12/02
4400
echart渐变折线图,立体柱状图,发光饼图,月份图等
echart-仪表盘 原
 gauge : {         startAngle: 225,         endAngle : -45,         axisLine: {            // 坐标轴线             show: true,        // 默认显示,属性show控制显示与否             lineStyle: {       // 属性lineStyle控制线条样式                 color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],                  width: 10             }         },         axisTick: {            // 坐标轴小标记             splitNumber: 10,   // 每份split细分多少段             length :15,        // 属性length控制线长             lineStyle: {       // 属性lineStyle控制线条样式                 color: 'auto'             }         },         axisLabel: {           // 坐标轴文本标签,详见axis.axisLabel             textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE                 color: 'auto'             }         },         splitLine: {           // 分隔线             length :22,         // 属性length控制线长             lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式                 color: 'auto'             }         },         pointer : {             width : 5,             color : 'auto'         },         title : {             textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE                 color: '#333'             }         },         detail : {             textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE                 color: 'auto'             }         }     },
tianyawhl
2019/04/04
1.2K0
相关推荐
折线图
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验