使用vue实现柱形图的方法：1、创建div属性为“<div ref="barchart" style="height: 1000px; width: 100%"/>”；2、通过“mounted(){this.fetchdata()window.addeventlistener('resize',()=>{if (this.chart){...}”实现立体柱状图即可。
本教程操作环境：windows10系统、vue3版、dell g3电脑
怎么使用vue实现柱形图？
vue 实现立体柱状图
样式如下图所示：
可以将立体柱状图看做由ydata+底+顶构成，对应代码如下：
<template> <div ref="barchart" style="height: 1000px; width: 100%"/></template>
<script>import echarts from 'echarts'export default { data() { return { chart: null, data: [], //数据 xdata: [], //x轴 ybardata: [], //y轴 ylable: [], colorstops: [], chartlegend: [], //图例 coloroptions: [ //图例以及柱形图颜色选择 '#5ba2e4', '#f58510', '#afa5a5', '#facb3d', '#0854cf', '#48c611', '#082b63' ] } }, mounted() { this.fetchdata() //图的大小自适应 window.addeventlistener('resize',()=>{ if (this.chart){ this.chart.resize() } }) }, beforedestroy() { //实例销毁之前调用 if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { fetchdata() { this.xdata = [黑龙江,'辽宁','贵州','福建','湖北','河南','河北','山西','山东','天津','吉林','北京','内蒙古','云南'] this.ylable = ['10','20','30','40','50','60','70','80','90','100','110','120','130','140'] this.chartlegend = [] const datearr = [] this.ylable.foreach((item, index) => { if (item !== null && item !== undefined) { datearr.push(this.ylable[index]) } }) this.chartlegend = datearr this.initdata() this.initchart() }, initdata() { this.ybardata = this.ylable }, initchart() { this.chart = echarts.init(this.$refs.barchart) this.chart.clear() // 清空当前实例 let colors = [] const dom = 800 const barwidth = dom / 20 for (let i = 0; i < 4; i++) { colors.push({ colorstops: [ { offset: 0, color: '#73fcff' // 最左边 }, { offset: 0.5, color: '#86eef1' // 左边的右边 颜色 }, { offset: 0.5, color: '#5ad6d9' // 右边的左边 颜色 }, { offset: 1, color: '#3dc8ca' }] }) } this.chart.setoption({ backgroundcolor: '#010d3a', //提示框 tooltip: { trigger: 'axis', formatter: "{b} : {c}", axispointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, /**区域位置*/ grid: { left: '10%', right: '10%', top: '10%', bottom: '10%', }, //x轴 xaxis: [{ data: this.xdata, type: 'category', show: true, axisline: { show: false, linestyle: { color: 'rgba(255,255,255,1)', shadowcolor: 'rgba(255,255,255,1)', // shadowoffsetx: '20' }, symbol: ['none', 'arrow'], symboloffset: [0, 25] }, splitline: { show: false }, axistick: { show: false }, axislabel: { margin: 20, fontsize: 10 } }], yaxis: { show: true, splitnumber: 4, axisline: { show: false }, splitline: { show: true, linestyle: { type: 'dashed', color: '#075858' }, }, axislabel: { show: true, color: '#ffffff', margin: 30, fontsize: 15 } }, series: [ {//数据颜色 name: '日付费用户数', type: 'bar', barwidth: barwidth, itemstyle: { normal: { color: (params) => { return colors[params.dataindex % 4]; } } }, label: { show: true, position: [barwidth / 2, -(barwidth + 20)], color: '#ffffff', fontsize: 14, fontstyle: 'bold', align: 'center' }, data: this.ybardata }, {//底 z: 2, type: 'pictorialbar', data: this.ybardata, symbol: 'diamond', symboloffset: [0, '50%'], symbolsize: [barwidth, barwidth * 0.5], itemstyle: { normal: { color: (params) => { return colors[params.dataindex % 4] } } } }, {//顶 z: 3, type: 'pictorialbar', symbolposition: 'end', data: this.ybardata, symbol: 'diamond', symboloffset: [0, '-50%'], symbolsize: [barwidth, barwidth * 0.5], itemstyle: { normal: { borderwidth: 0, color: (params) => { return colors[params.dataindex % 4].colorstops[0].color; } } } } ] }, true) } }}</script>
上述js代码中，有如下注意事项：
颜色选择：可以将colors[params.dataindex % 4]替换为this.coloroptions[params.dataindex % 4]，即使用代码中定义的coloroptions进行颜色填充colorstops保证了立体的效果代码中colors[params.dataindex % 4]中的4的选取是可变的，保证索引值在colors变量的长度范围内。例如：本例中colors长度为4，params.dataindex % 4不超过4即可引用上述barchart可应用如下代码：
<template> <bar-chart /></template>
<script>import barchart from ./components/barchartexport default { name: 'barchart', components: { barchart }}</script>
推荐学习：《vue视频教程》
以上就是怎么使用vue实现柱形图的详细内容。