vue使用echarts實現水平柱形圖例項
阿新 • • 發佈:2020-09-11
檔案結構:
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',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,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,0.1)' },axisLabel: { show: true,textStyle: { color: '#fff' } },}],yAxis: { type: 'value',// name:'單位:(人次 )',min: 0,max: 500,interval: 100,0.1)' } },splitLine: { lineStyle: { type: 'dashed',show:false },series: [{ name: '省內',type: 'bar',// color: colors[0],data: data1,itemStyle:{ normal: { //每個柱子的顏色即為colorList數組裡的每一項,如果柱子數目多於colorList的長度,則柱子顏色迴圈使用該陣列 //此處的箭頭函式是為了不改變this的指向 color: (params) => { var index = params.dataIndex; var colorList = [ // 漸變顏色的色值和透明度 //雙柱狀圖漸變的 第一個柱子的漸變色['rgba(15,0)',0)'],['rgba(15,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,1,[ {offset: 0.2,color: colorList[1][index]},{offset: 1,color: colorList[0][index]} ]) } } } },{ name: '省外',// color: colors[1],data: data2,如果柱子數目多於colorList的長度,則柱子顏色迴圈使用該陣列 color: (params) => { var index = params.dataIndex; var colorList = [ // 漸變顏色的色值和透明度 //雙柱狀圖漸變的 漸變第二個柱子的漸變色['rgba(15,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,color: colorList[0][index]} ]) } } } }] }) } } }
最終結果
以上這篇vue使用echarts實現水平柱形圖例項就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。