echarts histogram click event and chart simple configuration (title, color, scale, automatic width and height)

download:

npm install echarts@5.2.2 --save

main.js：

// main.js 引入echarts方式如下
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

Click event:

    myChart.on('click', 'series.bar', function (e) {
    
     that.gotoOrder1(e) })

index.vue: can be directly copied and used

<template>
  <div class="dlsFirst">
    <div class="one_box" id="one_box" ref="one_box">
    </div>
  </div>
</template>

<script>
export default {
    
    
  name: 'dlsFirst',
  data () {
    
    
    return {
    
    
      chartHeight1: 0,

      option1: {
    
    
        // color: 'orange',// 纹理填充--柱子颜色
        title: {
    
    //标题样式
          text: '今日签单保费排行',//主标题文本，'\n'指定换行
          textStyle: {
    
    
            color: '#00000072', //颜色
            // fontStyle: 'normal', //风格
            fontWeight: 'normal', //粗细
            fontFamily: 'Roboto', //字体
            fontSize: 14, //大小
            align: 'left' //水平对齐
          },
          left: 'auto',
          top: 'auto',
          right: 'auto',
          bottom: 'auto',
        },
        tooltip: {
    
    
          trigger: 'axis',
          backgroundColor: '#ccc',
          axisPointer: {
    
    
            type: 'shadow'
          },
          formatter: function (val) {
    
     // hover显示框
            var htmlStr = ''
            htmlStr += '<div><span style="color:#000;">' + val[0].name + '</span><br/> '
            for (var i = 0; i < val.length; i++) {
    
    
              // 前面的原点和他的颜色
              // htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:' + val[i].color + '"></span><span style="color:#000;">' + val[i].seriesName + ':</span>' +
              htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:' + val[i].color + '"></span><span style="color:#000;">' + '&nbsp;&nbsp;</span>' +
                '<span style="color:#000;">' + val[i].value + '&nbsp;万元</span><br/>'
            }
            htmlStr += '</div>'
            return htmlStr
            // console.log(val[0])
            // return val[0].name + '<br>' + val[0].seriesName + ':' + val[0].data + '(万元)'
          }
        },
        legend: {
    
    }, // 颜色模块指标显示位置
        grid: {
    
     //图表在画布中的位置
          left: '1%',
          right: '3%',
          bottom: '3%',
          top: '6%',
          containLabel: true
        },
        xAxis: {
    
    
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
    
    
            show: true //x轴
          },
          axisTick: {
    
    
            show: true //x轴刻度线
          },
          axisLabel: {
    
    
            show: true //x轴刻度值
          },
          splitLine: {
    
    
            show: true //去掉x轴网格线
          },

        },
        yAxis: {
    
    
          type: 'category',
          data: ['Brazil', 'ABNMGFDHJKFDIWO', 'USA', 'India', '日本', 'China', 'World'],
          axisLine: {
    
     //坐标轴轴线相关设置。
            // show: false //y轴
            lineStyle: {
    
    
              color: '#C4C4C4',
              width: 1,//这里是为了突出显示加上的
            }
          },
          axisTick: {
    
    
            show: false //y轴刻度线
          },
          axisLabel: {
    
    //坐标轴刻度标签的相关设置。
            // show: false //y轴刻度值
            color: '#000000D8',
            fontFamily: 'PingFang SC',
            // fontWeight: 'medium',
            fontSize: 12,
            // formatter: "{value}自定义",
            // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
            formatter: function (value, index) {
    
    
                return value + '自定义';
            },
            interval: 0,
            textStyle:{
    
     //X轴Y轴下面文字或数据颜色设置
               color: "red",
            },
          },

          splitLine: {
    
    
            // show: false //去掉y轴网格线
          },

        },
        series: [
          {
    
    
            // name: '2011', // 控制不同数据的选取显示
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 110203, 131744, 190230],
            itemStyle: {
    
     //图形样式。
              color: 'orange'
            },
            label: {
    
     //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
              fontFamily: 'Roboto',
              fontSize: 12,
              color: '#000000D8', //图形上的数字颜色
              show: true, // 自动显示数据 ，无需鼠标滑动才显示数据
              precision: 1,
              position: 'right', // 数据展示的位置  最右侧
              valueAnimation: true,
              fontFamily: 'monospace',
              formatter: '{c}万元'// c后面加单位--柱子数据后的单位      '{a}{b}:{c}%（元）'字符串模板： 模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
            },
            barWidth: 10 // 柱图宽度    总体图标宽高是自己设置的  可以计算每个分段宽高再去设置
          },
        ]
      },
      
    }
  },
  mounted () {
    
    
    let that = this
    // console.log(this.$echarts)

    this.chartHeight1 = this.option1.yAxis.data.length * 46 + 'px'
    const myChart = this.$echarts.init(this.$refs.one_box)
    //调用resize方法给图表设置动态宽高
    myChart.resize({
    
    
      height: this.chartHeight1
    })
    myChart.on('click', 'series.bar', function (e) {
    
     that.gotoOrder1(e) })
    myChart.setOption(this.option1)
  },
  methods: {
    
    
    gotoOrder1 (e) {
    
    
      console.log(e.name)
      console.log(e)
    },
  }
}
</script>

<style lang="less" scoped>
</style>