Vue中引入Echarts——基础图形(进阶版)

上一遍讲解到了如何在Vue中引入Echarts，这一篇以柱形图为例对于一些图形显示上做一些案例展示。

由于直接在代码中写好注解，不做过多讲解直接上代码

<template>
  <div>
  <div id="main" style="width:100%;height:400px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name:"lineChartUp",
    data(){
        return{
          option: {
            grid: {
              x: 30, y: 30, x2: 30, y2: 30 // 调整图形显示的样式
            },
            xAxis: {
              axisTick: { show: false }, // x坐标轴刻度标签是否显示
              axisLine: { show: false }, // x坐标轴轴线是否显示
              axisLabel: {
                show: true, // x坐标轴文字是否显示
                interval:0, // x坐标轴文字相隔多少列显示
                rotate:60, // x坐标轴字体倾斜度
                textStyle: {
                  color: '#333' // x坐标轴字体颜色
                }
              }, 
              show: true, // x坐标轴是否显示
              data: ['第一', '第二', '第三', '第四', '第五', '第六'], // x坐标轴的数据集
            },
            yAxis: {
              axisTick: { show: false }, // y坐标轴刻度标签是否显示
              axisLine: { show: false }, // y坐标轴轴线是否显示
              type: 'value',
              name: '人次', // y坐标轴显示文字
            },
            series: [
              {
                name: '浏览量', // 显示的数据名
                type: 'bar', // 显示类型
                data: ['18', '13', '15', '17', '11', '15'], // y轴数据集
                barWidth: 25,   //柱图宽度
                itemStyle: {
                  normal: {
                    barBorderRadius: [10, 10, 0, 0],    // 圆头 从左到右分别调整上左、上右、下左、下右
                    color: new echarts.graphic.LinearGradient(  // 柱形显示颜色设置
                      0, 0, 0, 1,
                      [
                        { offset: 0, color: '#97E6FF' },   //柱图渐变色
                        // { offset: 0.5, color: '#FB8300' }, //柱图渐变色
                        { offset: 1, color: '#0091FF' },   //柱图渐变色
                      ]
                    )
                  },
                },
              }
            ],
            tooltip: {
              //提示框组件
              trigger: "axis",
              formatter:`人次：{b}<br/>{a0}: {c0}人`, //提示框浮层内容格式器
              textStyle: {  // 文字显示样式
                color: "#333333",
                fontFamily: "微软雅黑",
                fontSize: 16
              }
            },
          }
        }
    },
    methods:{
        init() {
           const mychart = echarts.init(document.getElementById('main'));
           mychart.setOption(this.option);
        }
    },
    mounted(){
        this.init();
    }
}
</script>

<style>

</style>

效果图：