echarts+VUE实现柱状图，以及一些基本配置

一、记录

记录一下自己的学习过程，学习网站：https://echarts.apache.org/zh/index.html，没事可以去看看网站的文档，挺全的。

二、柱状图实现代码

先用npm下载安装一下echarts组件

npm install echarts

 学习的时候写的代码，大部分地方都写了注释，实现效果是个双状图，删掉一个数据就是单柱状图，复杂的柱状图实现可以去echarts网站学习一下。如果想对轴进行设置就找axisLine,对刻度进行设置找axisTick，对刻度标签进行设置找axisLabel。

<template>
        <div id="main_bar" style="width: 100%; height: 450px"></div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  name: "bar",
  data() {
    return {
      xy_data: [
        {name: '一', value: 100, value2: 190,},
        {name: '二', value: 180, value2: 110,},
        {name: '三', value: 120, value2: 170,},
        {name: '四', value: 160, value2: 160,},
        {name: '五', value: 140, value2: 130,},
        {name: '六', value: 280, value2: 240,},
        {name: '七', value: 320, value2: 300,},
      ],
    };
  },
  created() {
    this.initBar();
  },
  methods: {
    initBar() {
      // 当出现获取不到节点的时候使用this.$nextTick,否则可用，也可不用
      this.$nextTick(() =>{
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main_bar'));
        // 指定图表的配置项和数据
        let option = {
          // echarts标题
          title: {
            text: '柱状图'
          },
          tooltip: {},
          // 跟series里面相对应
          legend: {
            color: ['#dd6b66', '#759aa0',],
            data: ['短袖', '鞋子']
          },
          xAxis: {
            data: this.xy_data.map(item => item.name),
            // 轴设置
            axisLine: {
              width: 90,
              symbol: ['arrow', 'arrow'],
            },
            // 刻度标签
            axisLabel: {
              interval: '0',
              // 默认显示,值为true
              // show: false,
              // 哭刻度线与标签的距离
              margin: 10,
              // 标签角度，默认逆时针为0,默认顺时针为360，
              // rotate: -90,
              // 字体风格，默认为normal
              // fontStyle: 'italic',
              // 字体大小
              // fontSize: 10,
              // 字符串模板
              formatter: '{value}月',
              // 文字位置
              // align: 'left'
              // verticalAlign: 'bottom',
              // 配置了width，overflow才会生效
              width: 10,
              overflow: 'break',
            },
            // 刻度设置
            axisTick: {
              interval: '0',
              alignWithLabel: true,
              // 刻度线朝内，默认朝外
              inside: true,
              length: 6,
              // 刻度线样式设置
              lineStyle: {
                type: 'dashed',
                // ...
              }
            },
            type: 'category',
            name: '时间',
            nameLocation: 'middle',
            nameTextStyle: {
              // width: 30,
              // height: 40,
              // borderColor: '#dd6b66',
              // borderWidth: 1,
              padding: 40,
            },
          },
          yAxis: {},
          series: [
            {
              name: '短袖',
              // 此系列自己的调色盘。
              color: [
                '#dd6b66',
                // '#759aa0',
                // '#e69d87',
                // '#8dc1a9',
                // '#ea7e53',
                // '#eedd78',
                // '#73a373',
                // '#73b9bc',
                // '#7289ab',
              ],
              type: 'bar',
              data: this.xy_data.map(item => item.value)
            },
            {
              name: '鞋子',
              // 此系列自己的调色盘。
              color: [
                // '#dd6b66',
                '#759aa0',
              ],
              type: 'bar',
              data: this.xy_data.map(item => item.value2)
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      })
    },
  }
};
</script>

三、效果图