前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >柱状图

柱状图

作者头像
onety码生
发布2020-09-16 11:20:40
1K0
发布2020-09-16 11:20:40
举报
文章被收录于专栏:码生码生

柱状图

代码语言:javascript
复制
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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档