ECharts之柱状图

旧城等待， 2021-09-29 22:48 680阅读 0赞

# 效果图 #

![在这里插入图片描述][20190725104919483.gif]

# 背景图片 #

![20190725170845879.png][]

# 下载ECharts #

npm install echarts --save

# 引入并注册全局ECharts #

在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts
    
    Vue.config.productionTip = false
    
    new Vue({ 
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

# 在组件中使用ECharts #

<template>
      <div class='wrapper'>
        <div class='chart' id='chart'></div>
      </div>
    </template>
    
    <script>
    export default { 
      data () { 
        return { }
      },
      mounted () { 
        this.drawChart()
      },
      methods: { 
        drawChart () { 
          // 基于准备好的dom，初始化echarts实例
          let chart = this.$echarts.init(document.getElementById('chart'))
          // 监听屏幕变化自动缩放图表
          window.addEventListener('resize', function () {  chart.resize() })
          // 绘制图表
          chart.setOption({ 
            // 设置图表的位置
            grid: { 
              x: 60, // 左间距
              y: 80, // 上间距
              x2: 60, // 右间距
              y2: 40, // 下间距
              containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
            },
            // dataZoom 组件 用于区域缩放
            dataZoom: [
              { 
                type: 'inside',
                xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
                // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
                start: 0,
                end: 80
              }
            ],
            // 图表主标题
            title: { 
              text: '短袖销售额', // 主标题文本，支持使用 \n 换行
              top: 10, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
              left: 'center', // 值: 'left', 'center', 'right' 同上
              textStyle: {  // 文本样式
                fontSize: 24,
                fontWeight: 600,
                color: '#fff'
              }
            },
            // 设置自定义文字
            graphic: [
              { 
                type: 'text', // 图形元素类型
                left: 35, // 进行定位
                bottom: 18,
                style: {  // 文本样式
                  fill: '#cdd3ee',
                  text: '(月份)',
                  font: 'normal 14px Microsoft' // style | weight | size | family
                }
              }
            ],
            // 提示框组件
            tooltip: { 
              trigger: 'axis', // 触发类型, axis: 坐标轴触发
              axisPointer: { 
                type: 'line' // 指示器类型
              },
              // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
              // 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
              formatter: '{b}<br />{a0}: {c0}万<br />{a1}: {c1}%'
            },
            // 图例组件
            legend: { 
              // 图例的数据数组
              data: [
                { 
                  name: '已销售' // 图例项的名称 与 series 里的 name 相对应
                },
                { 
                  name: '销售率'
                }
              ],
              itemWidth: 15, // 图例标记的图形宽度
              itemHeight: 15, // 图例标记的图形高度
              // 图例项的 icon 值: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
              icon: 'roundRect', 
              top: 13, // 定位
              right: 10,
              textStyle: {  // 文本样式
                fontSize: 16,
                color: '#cdd3ee'
              }
            },
            // X轴
            xAxis: { 
              show: true, // 不设置默认值为 true
              // 坐标轴类型, 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
              type: 'category', 
              // 坐标轴轴线
              axisLine: { 
                lineStyle: { 
                  type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
                  width: 1, // 坐标轴线线宽, 不设置默认值为 1
                  color: '#cdd3ee' // 坐标轴线线的颜色
                }
              },
              // 坐标轴刻度
              axisTick: { 
                show: false
              },
              // 分隔线
              splitLine: { 
                show: false
              },
              // 坐标轴刻度标签
              axisLabel: { 
                fontSize: 16, // 文字的字体大小
                color: '#cdd3ee', // 刻度标签文字的颜色
                // 使用函数模板 传入的数据值 -> value: number|Array,
                formatter: function (value) { 
                  return value.replace(/[\u4e00-\u9fa5]/g, '')
                }
              },
              // 类目名称
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: [
              // 左侧Y轴
              { 
                type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
                name: '单位/万', // 坐标轴名称
                nameLocation: 'end', // 坐标轴名称显示位置 'start', 'middle' 或者 'center', 'end'
                nameTextStyle: {  // 坐标轴名称的文字样式
                  fontSize: 16
                },
                nameGap: 13, // 坐标轴名称与轴线之间的距离
                // 坐标轴刻度
                axisTick: { 
                  show: true // 是否显示坐标轴刻度 默认显示
                },
                // 坐标轴轴线
                axisLine: {  // 是否显示坐标轴轴线 默认显示
                  show: true, // 是否显示坐标轴轴线 默认显示
                  lineStyle: {  // 坐标轴线线的颜色
                    color: '#cdd3ee'
                  }
                },
                // 坐标轴在图表区域中的分隔线
                splitLine: { 
                  show: false // 是否显示分隔线。默认数值轴显示
                },
                // 坐标轴刻度标签
                axisLabel: { 
                  show: true, // 是否显示刻度标签 默认显示
                  fontSize: 16, // 文字的字体大小
                  color: '#cdd3ee', // 刻度标签文字的颜色
                  // 使用字符串模板，模板变量为刻度默认标签 {value}
                  formatter: '{value}'
                }
              },
              // 右侧Y轴
              { 
                // 坐标轴刻度
                axisTick: { 
                  show: true // 是否显示坐标轴刻度 默认显示
                },
                // 坐标轴轴线
                axisLine: {  // 是否显示坐标轴轴线 默认显示
                  show: true, // 是否显示坐标轴轴线 默认显示
                  lineStyle: {  // 坐标轴线线的颜色
                    color: '#cdd3ee'
                  }
                },
                // 坐标轴在图表区域中的分隔线
                splitLine: { 
                  show: false // 是否显示分隔线 默认数值轴显示
                },
                axisLabel: { 
                  show: true,
                  fontSize: 16,
                  color: '#cdd3ee',
                  // 使用字符串模板，模板变量为刻度默认标签 {value}
                  formatter: '{value}%'
                }
              }
            ],
            // 系列列表
            series: [
              { 
                type: 'bar', // 系列类型
                name: '已销售', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                barMaxWidth: 15, // 柱条的最大宽度，不设时自适应
                barGap: 0, // 不同系列的柱间距离, 为百分比 默认值为30%
                // 图形上的文本标签
                label: { 
                  show: false,
                  fontSize: 16,
                  color: '#fff'
                },
                // 图形样式
                itemStyle: { 
                  // 柱条的颜色, 这里是渐变色, 默认从全局调色盘 option.color 获取颜色
                  color: { 
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{ 
                      offset: 0,
                      color: '#FAB363' // 0% 处的颜色
                    }, { 
                      offset: 1,
                      color: '#FB7C2B' // 100% 处的颜色
                    }]
                  },
                  barBorderRadius: [10, 10, 0, 0] // 圆角半径, 单位px, 支持传入数组分别指定 4 个圆角半径
                },
                // 系列中的数据内容数组
                data: [200, 330, 400, 600, 830, 650, 690, 430, 550, 420, 420, 320]
              },
              { 
                type: 'line', // 系列类型
                name: '销售率', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                symbol: 'circle', // 标记的图形
                symbolSize: 10, // 标记的大小
                yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                // 图形的样式
                itemStyle: { 
                  color: '#11abff'
                },
                // 线的样式, 修改 lineStyle 中的颜色不会影响图例颜色, 一般不设置线的样式
                lineStyle: { 
                  type: 'solid', // 线的类型 'solid', 'dashed', 'dotted'
                  color: '#11abff'
                },
                // 图形上的文本标签
                label: { 
                  show: false,
                  fontSize: 16,
                  color: '#fff'
                },
                // 系列中的数据内容数组
                data: [20, 24, 33, 45, 63, 50, 42, 24, 23, 14, 20, 10]
              }
            ]
          })
        }
      }
    }
    </script>
    
    <style scoped>
    .wrapper { 
      width: 100%;
    }
    .wrapper .chart { 
      width: 60%;
      height: 400px;
      margin: 100px 50px 0;
      border: 1px solid #eeeeee;
      background: url(../../public/static/bg.png) no-repeat;
      background-size: 100% 100%;
    }
    </style>

[20190725104919483.gif]: /images/20210812/076c6b6219fa465f8b721e81abf0d1ee.png
[20190725170845879.png]: /images/20210812/560aa78062e644619aa60d2596b51e21.png