ECharts之横向柱状图二

效果图

背景图片

下载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 () {
      let datas = [0,0,1,1,0,1]
      // 基于准备好的dom，初始化echarts实例
      const chart = this.$echarts.init(document.getElementById('chart'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () { chart.resize() })
      // 绘制图表
      chart.setOption({
        color: ['#74d1fd', '#009ae4', '#0071c1'],
        // 设置图表的位置
        grid: {
          x: 40, // 左间距
          y: 60, // 上间距
          x2: 10, // 右间距
          y2: 30, // 下间距
          containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
        },
        // 提示框组件
        tooltip: {
          trigger: 'axis', // 触发类型, axis: 坐标轴触发
          axisPointer: {
            // 指示器类型  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
            // 其实是种简写，表示启用两个正交的轴的 axisPointer。
            type: 'none' 
          },
          textStyle: {
            color: '#cdd3ee' // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
          formatter: '{b}<br />{a0}: {c0}%'
        },
        // 图例组件
        legend: {
          textStyle: { // 文本样式
            fontSize: 16,
            color: '#cdd3ee'
          },
          top: 20, // 定位
          selectedMode: false, // 取消图例上的点击事件
          data: ['订单转化率'] // 图例的数据数组
        },
        // X轴
        xAxis: {
          type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
          // 坐标轴刻度
          axisTick: {
            show: false // 是否显示坐标轴刻度 默认显示
          },
          // 坐标轴轴线
          axisLine: { // 是否显示坐标轴轴线 默认显示
            show: false // 是否显示坐标轴轴线 默认显示
          },
          // 坐标轴在图表区域中的分隔线
          splitLine: {
            show: false // 是否显示分隔线。默认数值轴显示
          },
          // 坐标轴刻度标签
          axisLabel: {
            show: false // 是否显示刻度标签 默认显示
          }
        },
        yAxis: [
          // 左侧Y轴
          {
            type: 'category', // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
            // 坐标轴刻度
            axisTick: {
              show: false // 是否显示坐标轴刻度 默认显示
            },
            // 坐标轴轴线
            axisLine: { // 是否显示坐标轴轴线 默认显示
              show: false, // 是否显示坐标轴轴线 默认显示
              lineStyle: { // 坐标轴线线的颜色
                color: '#cdd3ee'
              }
            },
            // 坐标轴在图表区域中的分隔线
            splitLine: {
              show: false // 是否显示分隔线。默认数值轴显示
            },
            // 坐标轴刻度标签
            axisLabel: {
              show: true, // 是否显示刻度标签 默认显示
              fontSize: 16, // 文字的字体大小
              color: '#cdd3ee', // 刻度标签文字的颜色
              // 使用字符串模板，模板变量为刻度默认标签 {value}
              formatter: '{value}'
            },
            data: ['北京店', '上海店', '广州店', '深圳店', '杭州店', '厦门店'] // 类目数据，在类目轴（type: 'category'）中有效
          },
          // 右侧Y轴
          {
            type: 'category', // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
            // 坐标轴轴线
            axisLine: {
              show: false
            },
            // 坐标轴刻度
            axisTick: {
              show: false
            },
            // 坐标轴刻度标签
            axisLabel: {
              show: true, // 是否显示刻度标签 默认显示
              fontSize: 16, // 文字的字体大小
              color: '#cdd3ee', // 刻度标签文字的颜色
              margin: 10, // 刻度标签与轴线之间的距离
              // 使用字符串模板，模板变量为刻度默认标签 {value}
              formatter: '{value}%'
            },
            data: [65, 30, 40, 60, 45, 70] // 类目数据，在类目轴（type: 'category'）中有效
          },
          // 右侧Y轴 图形
          {
            // 坐标轴轴线
            axisLine: {
              show: false
            },
            // 坐标轴刻度
            axisTick: {
              show: false
            },
            // 坐标轴刻度标签
            axisLabel: {
              margin: 50, // 刻度标签与轴线之间的距离
              formatter: function (value, index) {
                if (datas[index] === 0) {
                  return '{idx|}';
                } else if (datas[index] === 1) {
                  return '{idx1|}';
                }
              },
              rich: {
                idx: {
                  padding: [0, 0, 4, 0], // 可以自行调整
                  backgroundColor: { // 必须是base64格式的图片
                    image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAYAAADt...'
                  }
                },
                idx1: {
                  padding: [0, 0, 4, 0], // 可以自行调整
                  backgroundColor: { // 必须是base64格式的图片
                    image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAYAAADt...'
                  }
                }
              }
            },
            data: [65, 30, 40, 60, 45, 70] // 类目数据，在类目轴（type: 'category'）中有效
          }
        ],
        // 系列列表
        series: [
          {
            type: 'bar', // 系列类型
            name: '订单转化率', // 系列名称, 用于tooltip的显示, legend 的图例筛选
            barMaxWidth: 10, // 柱条的最大宽度，不设时自适应
            showBackground: true, // 是否显示背景色
            // 图形上的文本标签
            label: {
              show: false,
              // 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']
              position: 'inside' 
            },
            // 图形样式
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#1089E7' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#56D0E3' // 100% 处的颜色
                  }
                ]
              },
              barBorderRadius: [0, 5, 5, 0] // 柱状图圆角
            },
            data: [65, 30, 40, 60, 45, 70] // 系列中的数据内容数组
          },
          // 背景
          {
            type: 'bar', // 系列类型
            name: '背景', // 系列名称, 用于tooltip的显示, legend 的图例筛选
            // 不同系列的柱间距离l，如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。
            // 这在用柱子做背景的时候有用
            barGap: '-100%', 
            barMaxWidth: 10, // 柱条的最大宽度，不设时自适应
            itemStyle: {
              normal: {
                color: "rgba(28, 128, 213, 0.19)"
              }
            },
            data: [100, 100, 100, 100, 100, 100]
          },
          // 发光小圆点
          {
            type: 'pictorialBar', // 系列类型
            name: '圆点', // 系列名称, 用于tooltip的显示, legend 的图例筛选
            symbol: 'circle', // 标记的图形
            symbolSize: 14, // 标记的大小
            symbolOffset: [0, 0], // 标记的偏移
            symbolPosition: 'end', // 标记的位置
            // 图形的样式
            itemStyle: {
              color: '#fff',
              borderColor: '#56D0E3', // 阴影边框颜色
              shadowColor: '#56D0E3', // 阴影颜色
              shadowBlur: 10, // 图形阴影的模糊大小
              shadowOffsetX: 1 // 阴影水平方向上的偏移距离
            },
            z: 10, // 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖
            data: [65, 30, 40, 60, 45, 70] // 系列中的数据内容数组
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
}
.wrapper .chart {
  width: 60%;
  height: 400px;
  margin: 100px auto 0;
  background: url(../../public/static/bg.png) no-repeat;
  background-size: 100% 100%;
}
</style>