echarts 在 vue项目中使用及立体柱状图的实现

vue 项目中使用echarts

首先安装echarts依赖

cnpm install echarts -S / yarn add echarts

在需要使用echarts图表的组件内引入

import echarts from ‘echarts’

通过ref进行标记

<div ref="echarts" style="width:100%;height:100%" class="echarts"></div>

在mounted内进行实例化

mounted() {
	this.drawCharts()
}
methods: {
	drawCharts() {
		var myChart = echarts.init(this.$refs.echarts)
		var option = {}
		myCharts.setOption(option)
	}
}

在option对象内进行echarts图表的配置项设置

立体柱状图的option和效果图

const data = [10, 52, 20, 33, 39, 33, 22, 33, 36, 26, 15]
const slideData = data.map(item => item + 2)
var option = {
   color: ['#3398DB'],
   tooltip: { // 鼠标滑过的
     trigger: 'axis',
     formatter: '{b}</br>{c}', 
     axisPointer: {
       type: 'shadow'
     }
   },
   grid: {   // 整体位置
     left: 0,  // 距离左侧距离
     bottom: 0, // 距离低侧的距离
     top: 10,   // 距离顶部的距离
     right: 0,  // 距离右侧的距离
     height: 'auto',
     width: 'auto',
     containLabel: true
   },
   xAxis: [  // 横坐标配置项
     {
       type: 'category',
       data: ['资源A', '资源B', '资源C', '资源D', '资源E', '资源F', '资源G', '资源H', '资源I', '资源J', '资源K'], 
       axisTick: {
         show: false  // 不展示凸出来的数据标志
       },
       axisLabel: {
         color: '#A4D5FF' // 坐标轴数值的颜色
       },
       axisLine: {
         lineStyle: {
           color: '#3376C4'  // 坐标轴的颜色
         }
       }
     }
   ],
   yAxis: [ // 纵坐标配置项
     {
       type: 'value',
       axisLine: {
         lineStyle: {
           color: '#3376C4'
         }
       },
       axisLabel: {
         color: '#A4D5FF'
       },
       axisTick: {
         show: false
       },
       splitLine: { show: false }  // 不展示横向的网格线
     }
   ],
   series: [  // 数据配置项（柱状图）
     { // 正面
       type: 'bar',  // 图表类型 bar 为柱状图
       barWidth: 24, // 柱体的宽度
       data: data,  // 柱体数据
       itemStyle: { // 单个柱体的配置项
         color: '#4A90E2'  
       },
       barGap: 0  // 柱体间隔
     }, { // 侧面
       type: 'bar',
       barWidth: 8,
       itemStyle: {
         color: '#3773BA'
       },
       data: slideData,
       barGap: 0
     }, {  // 顶部
       tooltip: {
         show: false
       },
       type: 'pictorialBar',
       itemStyle: {
         normal: {
           color: '#62A5F3'
         }
       },
       symbol: 'path://M 90,90 l 120,30 l 0,100 l -120, -30', // 控制顶部的倾斜和形状
       symbolRotate: 90,
       symbolSize: ['7.8', '30'],
       symbolOffset: ['0', '-19'],
       symbolPosition: 'end',
       data: data,
       z: 3
     }
   ]
 }