vue使用echarts实现水平柱形图实例
程序员文章站
2022-12-02 16:55:53
文件结构:testdata.js文件const dtuedition = { name: '有方有线', number: 60, proportion: 40, edition: { '有方有线v1....
文件结构:
testdata.js文件
const dtuedition = { name: '有方有线', number: 60, proportion: 40, edition: { '有方有线v1.0.0': 20, '有方有线v1.2.0': 15, '有方有线v2.0.1': 10, '有方有线v3.0.0': 8, '有方有线v3.2.0': 5, '有方有线v3.4.0': 4, '有方有线v4.0.0': 3, '有方有线v4.0.2': 2, '有方有线v4.0.3': 1 } } export default { namespaced: true, // 用于在全局引用此文件里的方法时标识这一个的文件名 dtuedition }
dtudistributioncurve.js文件
// dtu连接率bar图的option let baroption = { grid: { // width: '85%', // 设置gird宽度 left: 40, // gird距离容器左边距 right: 65, top: 20, bottom: 0, containlabel: true }, xaxis: { show : false, // 不显示横轴 type: 'value', max: 1000, // 横轴最大值 }, yaxis: { type: 'category', data: [], axisline: { show: false }, axistick: { show: false }, splitline: { show: false } }, series: [{ type: 'bar', stack: 'chart', z: 3, itemstyle: { normal: { color: '#a7c7e9' } }, data: [] }, { type: 'bar', stack: 'chart', silent: true, label: { normal: { formatter: (params) => { // console.log(params) return baroption.xaxis.max-params.value }, color: '#666666', position: 'right', distance: 10, show: true } }, itemstyle: { normal: { color: '#f3f3f6' } }, barwidth : 10,//柱图宽度 data: [] }] } // 设置y轴标签 export function setyaxisdata(edition) { let data = [] for (let key in edition) { data.push(key) } baroption.yaxis.data = data.reverse() console.log(baroption.yaxis.data) } // 设置x轴最大值 export function setxaxismax(number) { baroption.xaxis.max = number } // 设置series的data数据 export function setseriesdata(edition, number) { let data0 = [] let data1 = [] for(let key in edition) { data0.push(edition[key]) data1.push(number - edition[key]) } baroption.series[0].data = data0.reverse() baroption.series[1].data = data1.reverse() } export default { baroption, setyaxisdata, setxaxismax, setseriesdata }
vue文件
<template> <div ref="dtuedition" class="project-survey-dtu-edition"></div> </template> <script> import testdata from '../constvalue/testdata' import dtudistributionoption from '../curveoption/dtudistributioncurve' export default { name: 'projectsurvey', data() { return { dtueditionchart: null } }, methods: { // 点击dtu模块数量分布展示图的扇区item distributionchartclick(param) { console.log(param) let dtuedition = testdata.dtuedition this.dtuname = dtuedition.name this.dtunumber = dtuedition.number this.dtuproportion = dtuedition.proportion + '%' dtudistributionoption.setyaxisdata(dtuedition.edition) dtudistributionoption.setxaxismax(dtuedition.number) dtudistributionoption.setseriesdata(dtuedition.edition, dtuedition.number) this.dtueditionchart.setoption(dtudistributionoption.baroption) this.dtueditionchart.resize() }, // 点击tab的某页 tabclick(tab, event) { console.log(this.activename) if(this.activename === 'first') { // 从后端获取连接率统计数据 } else { // 从后端获取模块数量分布展示数据 let distributioninfo = testdata.dtudistribution.distributioninfo this.deadline = testdata.dtudistribution.deadline dtudistributionoption.setsectorvalue(distributioninfo) dtudistributionoption.setsectorname(testdata.dtudistribution.alldistribution) this.distributionchart.setoption(dtudistributionoption.pieoption) this.distributionchart.resize() this.distributionchart.on('click', this.distributionchartclick) } } }, mounted() { this.dtueditionchart = this.$echarts.init(this.$refs.dtuedition) this.distributionchart = this.$echarts.init(this.$refs.dtudistribution) let maxv = this.getmaxv() let minv = this.getminv() for(let item of this.connectioninfo) { this.charts[item.dtuname] = this.$echarts.init(document.getelementbyid(item.dtuname)) let normalizationratio = this.normalization(item.connectionratio, maxv, minv) dtuconnectionoption.setsectorcolor(normalizationratio) dtuconnectionoption.settitletext(item.dtuname) dtuconnectionoption.setsectorvalue(item.connectionratio) dtuconnectionoption.setsectorname(item.connectionratio) // console.log(dtuconnectionoption.option) this.charts[item.dtuname].setoption(dtuconnectionoption.option) this.charts[item.dtuname].resize() } window.onresize = () => { this.distributionchart.resize() this.dtueditionchart.resize() } }, updated() { this.distributionchart.resize() for(let item of this.connectioninfo) { this.charts[item.dtuname].resize() } } } </script> <style> .project-survey-dtu-edition { height: 580px; } </style>
图表
补充知识:vue+echart实现 x轴 双柱状图 渐变色
一: 安装
1. 首先需要安装echarts依赖包
npm install echarts -s
2. 或者使用国内的淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
二: 创建图表
全局引入
main.js
>```javascript // 引入echarts import echarts from 'echarts' vue.prototype.$echarts = echarts
hello.vue
<div id="mychart" :style="{width: '300px', height: '300px'}"></div>
export default { data(){ return {} }, mounted(){ this.mychart() //函数调用 }, methods:{ mychart(){ let mychart= this.$echarts.init(document.getelementbyid('mychart')); // var colors = ['rgba(15,115,255,0.6)', 'rgba(15,235,255,0.6)']; var data1 = [350, 250, 170, 360, 240]; var data2 = [187, 146, 129, 174,245]; var xdata = ['3.12','3.13','3.14','3.15','3.16'] rightbtns.setoption({ // backgroundcolor:'#fff', tooltip: { trigger: "axis", // formatter: '{b}<br/>{a1}-违规率:{c1}<br/>{a0}-违规率:{c0}', axispointer: { type: "shadow", textstyle: { color: "#fff" } }, }, grid: { top: '8%', right: '8%', bottom: '60%' }, legend: { data: ['省内', '省外'], align: 'left', left: '30%', top: '4%', textstyle:{ color:'#fff' } }, calculable: true, xaxis: [{ type: "category", data: xdata, axisline: { linestyle: { color: 'rgba(255,255,255,0.1)' }, }, axislabel: { show: true, textstyle: { color: '#fff' } }, }], yaxis: { type: 'value', // name:'单位:(人次 )', min: 0, max: 500, interval: 100, axisline: { linestyle: { color: 'rgba(255,255,255,0.1)' } }, splitline: { linestyle: { type: 'dashed', }, show:false }, axislabel: { show: true, textstyle: { color: '#fff' } }, }, series: [{ name: '省内', type: 'bar', // color: colors[0], data: data1, itemstyle:{ normal: { //每个柱子的颜色即为colorlist数组里的每一项,如果柱子数目多于colorlist的长度,则柱子颜色循环使用该数组 //此处的箭头函数是为了不改变this的指向 color: (params) => { var index = params.dataindex; var colorlist = [ // 渐变颜色的色值和透明度 //双柱状图渐变的 第一个柱子的渐变色['rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)'], ['rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)'] ]; if(params.dataindex >= colorlist.length){ index=params.dataindex-colorlist.length; } //方法一: //不使用箭头函数的写法改变渐变色 // return { // colorstops: [{ // offset: 0, //颜色开始的位置 // color: colorlist[0][index] // 0% 处的颜色 // },{ // offset: 0.6, //颜色结束的位置 // color: colorlist[1][index] // 100% 处的颜色 // }] // } //方法二:使用箭头函数的写法 改变双柱状图的渐变颜色 return new this.$echarts.graphic.lineargradient(0,0,0,1,[ {offset: 0.2, color: colorlist[1][index]}, {offset: 1, color: colorlist[0][index]} ]) } } } }, { name: '省外', type: 'bar', // color: colors[1], data: data2, itemstyle:{ normal: { //每个柱子的颜色即为colorlist数组里的每一项,如果柱子数目多于colorlist的长度,则柱子颜色循环使用该数组 color: (params) => { var index = params.dataindex; var colorlist = [ // 渐变颜色的色值和透明度 //双柱状图渐变的 渐变第二个柱子的渐变色['rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)'], ['rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)'] ]; //方法一: //不使用箭头函数的写法改变渐变色 // return { // colorstops: [{ // offset: 0, // color: colorlist[0][index] // 0% 处的颜色 // },{ // offset:0.6, // color: colorlist[1][index] // 100% 处的颜色 // }] // } //方法二:使用箭头函数的写法 改变双柱状图的渐变颜色 return new this.$echarts.graphic.lineargradient(0,0,0,1,[ {offset: 0.2, color: colorlist[1][index]}, {offset: 1, color: colorlist[0][index]} ]) } } } }] }) } } }
最终结果
以上这篇vue使用echarts实现水平柱形图实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。