vue使用echarts實(shí)現(xiàn)水平柱形圖實(shí)例
更新時間：2020年09月09日 17:37:07 作者：走_(dá)開
這篇文章主要介紹了vue使用echarts實(shí)現(xiàn)水平柱形圖實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
文件結(jié)構(gòu)：
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, // 用于在全局引用此文件里的方法時標(biāo)識這一個的文件名
dtuEdition
}
dtuDistributionCurve.js文件
// DTU連接率bar圖的option
let barOption = {
grid: {
// width: '85%', // 設(shè)置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: []
}]
}
// 設(shè)置y軸標(biāo)簽
export function setYAxisData(edition) {
let data = []
for (let key in edition) {
data.push(key)
}
barOption.yAxis.data = data.reverse()
console.log(barOption.yAxis.data)
}
// 設(shè)置x軸最大值
export function setXAxisMax(number) {
barOption.xAxis.max = number
}
// 設(shè)置series的data數(shù)據(jù)
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: {
// 點(diǎn)擊DTU模塊數(shù)量分布展示圖的扇區(qū)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()
},
// 點(diǎn)擊tab的某頁
tabClick(tab, event) {
console.log(this.activeName)
if(this.activeName === 'first') { // 從后端獲取連接率統(tǒng)計(jì)數(shù)據(jù)
} else { // 從后端獲取模塊數(shù)量分布展示數(shù)據(jù)
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>
圖表
補(bǔ)充知識：vue+echart實(shí)現(xiàn) X軸 雙柱狀圖 漸變色
一: 安裝
1. 首先需要安裝echarts依賴包
npm install echarts -S
2. 或者使用國內(nèi)的淘寶鏡像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
二: 創(chuàng)建圖表
全局引入
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() //函數(shù)調(diào)用
},
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: '<br/>{a1}-違規(guī)率:{c1}<br/>{a0}-違規(guī)率:{c0}',
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff"
}
},
},
grid: {
top: '8%',
right: '8%',
bottom: '60%'
},
legend: {
data: ['省內(nèi)', '省外'],
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: '省內(nèi)',
type: 'bar',
// color: colors[0],
data: data1,
itemStyle:{
normal: {
//每個柱子的顏色即為colorList數(shù)組里的每一項(xiàng),如果柱子數(shù)目多于colorList的長度，則柱子顏色循環(huán)使用該數(shù)組
//此處的箭頭函數(shù)是為了不改變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;
}
//方法一:
//不使用箭頭函數(shù)的寫法改變漸變色
// return {
// colorStops: [{
// offset: 0, //顏色開始的位置
// color: colorList[0][index] // 0% 處的顏色
// },{
// offset: 0.6, //顏色結(jié)束的位置
// color: colorList[1][index] // 100% 處的顏色
// }]
// }
//方法二:使用箭頭函數(shù)的寫法 改變雙柱狀圖的漸變顏色
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數(shù)組里的每一項(xiàng),如果柱子數(shù)目多于colorList的長度，則柱子顏色循環(huán)使用該數(shù)組
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)']
];
//方法一:
//不使用箭頭函數(shù)的寫法改變漸變色
// return {
// colorStops: [{
// offset: 0,
// color: colorList[0][index] // 0% 處的顏色
// },{
// offset:0.6,
// color: colorList[1][index] // 100% 處的顏色
// }]
// }
//方法二:使用箭頭函數(shù)的寫法 改變雙柱狀圖的漸變顏色
return new this.$echarts.graphic.LinearGradient(0,0,0,1,[
{offset: 0.2, color: colorList[1][index]},
{offset: 1, color: colorList[0][index]}
])
}
}
}
}]
})
}
}
}
最終結(jié)果
以上這篇vue使用echarts實(shí)現(xiàn)水平柱形圖實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
本文主要介紹Vue.js中過濾器和自定義指令相關(guān)的知識點(diǎn)，包括過濾器的定義方式，和使用方法，以及自定義指令的概念和注冊方式。2021-05-05
vue 動態(tài)添加/刪除dom元素節(jié)點(diǎn)的操作代碼
這篇文章主要介紹了vue 動態(tài)添加/刪除dom元素,需要在點(diǎn)擊添加時，增加一行key/value的輸入框；點(diǎn)擊垃圾桶圖標(biāo)時，刪除對應(yīng)行，本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-12-12
vue項(xiàng)目動態(tài)設(shè)置iframe元素高度的操作代碼
在現(xiàn)代Web開發(fā)中,iframe元素常用于嵌入外部內(nèi)容到當(dāng)前網(wǎng)頁中,比如在線文檔、視頻播放器或是廣告,Vue框架提供了強(qiáng)大的工具來解決這個問題,通過動態(tài)設(shè)置iframe元素的高度,我們可以確保頁面布局既美觀又高效,本文給大家介紹了vue項(xiàng)目動態(tài)設(shè)置iframe元素高度的操作2024-10-10
vue3+vite應(yīng)用中添加sass預(yù)處理器問題
這篇文章主要介紹了vue3+vite應(yīng)用中添加sass預(yù)處理器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問的解決方法
下面小編就為大家分享一篇vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
工作中vue表單使用的最多的莫過于input、textarea、select等，原生js的基礎(chǔ)上vue通過雙向數(shù)據(jù)綁定等，實(shí)現(xiàn)了自己獨(dú)有的一套指令，這是react中沒有的部分，也算是vue的一大特色2022-09-09
開發(fā)過程中我們會經(jīng)常遇到一些復(fù)雜的頁面,而這些頁面大部分由一個個小部分組合起來的,而且不同頁面中可能有些部分是一樣的,所以我們通常會將這些部分封裝成組件,在Vue中,我們可以使用components組件(模板)來實(shí)現(xiàn),本文就來詳細(xì)的說一說Vue3中的component組件2023-08-08
這篇文章主要介紹了Vuejs監(jiān)聽vuex中值的變化的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
v-for循環(huán)遍歷數(shù)據(jù),永遠(yuǎn)不要把v-if和v-for同時用在同一個元素上,下面這篇文章主要給大家介紹了關(guān)于如何通過一文帶你詳細(xì)了解Vue中v-for的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了關(guān)于vue中watch和computed區(qū)別的相關(guān)資料,computed和watch都是vue框架中的用于監(jiān)聽數(shù)據(jù)變化的屬性,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11