Vue中引入echarts的步驟及折線圖、柱狀圖常見配置項(xiàng)

更新時(shí)間：2023年11月26日 09:09:35 作者：仰望仰望

這篇文章主要介紹了Vue中引入echarts的步驟及折線圖、柱狀圖常見配置項(xiàng),需要的朋友可以參考下

一、安裝echarts

npm i echarts

二、引入echarts

1.全局引入

在main.js文件中

//全局引入echarts
import * as echarts from 'echarts';
//需要掛載到Vue原型上
Vue.prototype.$echarts = echarts;

二、局部引入

import * as echarts from "echarts";

三、在vue中使用echarts

1、準(zhǔn)備一個(gè)容器放置，并且配置ref屬性

<div ref="chart"></div>

2、將其封裝成一個(gè)函數(shù)，并在初次掛載時(shí)調(diào)用

<script>
import * as echarts from "echarts";
export default {
name: 'MyData',
data() {
return {

};
},
mounted() {
this.echartsInit();
},
methods: {
echartsInit() {

}
},
};
</script>

3、初始化（init函數(shù)），調(diào)節(jié)配置項(xiàng)

methods: {
echartsInit() {
//初始化容器
const myChart = echarts.init(this.$refs.pro_chart); 
const option = {這里面就是圖表的各種配置項(xiàng)，從官方文檔搞下來(lái)}; 
}
},

4、將配置項(xiàng)放入容器

echartsInit() {
const myChart = echarts.init(this.$refs.chart); //初始化容器
const option = {這里面就是圖表的各種配置項(xiàng)，從官方文檔搞下來(lái)};
myChart.setOption(option);
}

四、常見配置項(xiàng)

1.折線圖

option = {
title: {
text: '標(biāo)題'
},
//圖例的相關(guān)設(shè)置
legend: {
x:'center', //水平位置
y:'bottom', //垂直方向位置
padding: [10,0,0,0], //上右下左距離
itemWidth: 30, //圖例寬
itemHeight: 30, //圖例高
textStyle: { //圖例的字體樣式
fontSize: 26, 
color: '#666',
},
data: ['類目1', '類目2'], //圖例名字，要和數(shù)據(jù)的name對(duì)應(yīng)
},
//這是鼠標(biāo)移到某個(gè)數(shù)據(jù)上顯示的面板配置
tooltip: {
trigger: 'item',
triggerOn: 'click',
axisPointer: {
type: 'none'
},
formatter: function () {
return '17.5KG'
}
},
//這是一些工具，比如下面這個(gè)saveAsImage是保存為圖片的選項(xiàng)
toolbox: {
show: false,
feature: {
saveAsImage: {}
}
},
//圖的距離
grid: {
left: '3%',
right: '4%',
bottom: '5%',
top: '5%',
containLabel: true
},
//x軸相關(guān)配置
xAxis: {
type: 'category',
boundaryGap: false, //坐標(biāo)值是展示在小頭頭上還是展示在頭頭之間，你懂的
axisLabel: {
//設(shè)置x軸的展示間隔
interval: 0,
//x軸坐標(biāo)文字換行
formatter: function (value, index) {
var num = 5; //每行顯示字?jǐn)?shù) 
var str = "";
var valLength = value.length; //該項(xiàng)x軸字?jǐn)?shù) 
var rowNum = Math.ceil(valLength / num); // 行數(shù) 
if (rowNum > 1) {
for (var i = 0; i < rowNum; i++) {
var temp = "";
var start = i * num;
var end = start + num;
temp = value.substring(start, end) + "\n";
str += temp;
}
return str;
} else {
return value;
}
}
},
//刻度相關(guān)配置：
axisTick: {
show: false,//去掉刻度
},
//軸線相關(guān)配置：
axisLine: {
show: false, //去掉y軸的線
lineStyle: {color: '#ccc'}, //設(shè)置軸線顏色
},
// prettier-ignore
data: ['1','1''1''1''1''1''1''1']
},
yAxis: {
type: 'value',
//隱藏y軸的橫線
splitLine: {
show: false
},
//設(shè)置y軸的初始值和結(jié)束值
min: '20',
max: '24.5',
splitNumber: 9, //設(shè)置y軸的間隔
axisLabel: {
formatter: function (value) {
//保留一位小數(shù)并且加上單位
return value.toFixed(1) + ' °C';
}
},
axisPointer: {
snap: true
},
//刻度相關(guān)配置：
axisTick: {
show: false,//去掉刻度
},
//軸線相關(guān)配置：
axisLine: {
show: false, //去掉y軸的線
lineStyle: {color: '#ccc'}, //設(shè)置軸線顏色
},
},
series: [
{
name: '類目1',
type: 'line',
lineStyle: {
color: 'rgb(118, 162, 255, 1)', //改變折線顏色
normal: {
opacity: 0, //透明度，0隱藏1顯示
}
},
showSymbol: true, //顯示隱藏小圓點(diǎn)
itemStyle: {
color: 'RGBA(118, 162, 255, 1)', //小圓點(diǎn)的顏色
},
showBackground: true, //是否展示背景
backgroundStyle: {
color: 'RGBA(255, 228, 218, 1)' //背景色
},
smooth: true, //數(shù)據(jù)是否平滑連接
data: [21.1, 22.1, 23.5, 23.2, 22.5, 23.2, 22.1],
},
{
name: '類目2',
type: 'line',
lineStyle: {
color: 'rgb(63, 207, 153, 1)', //改變折線顏色
normal: {
opacity: 1, //透明度，0隱藏1顯示
}
},
showSymbol: true, //顯示隱藏折線上的小圓點(diǎn)
itemStyle: {
color: 'RGBA(63, 207, 153, 1)'
},
smooth: true,//數(shù)據(jù)是否平滑連接
data: [21.3, 22.8, 22.5, 23.6, 21.5, 23.2, 21.1],
},
]
};

2.柱狀圖

option = {
//圖例
legend: {
x: 'center',
y: 'bottom',
padding: [10, 0, 3, 0],
textStyle: { //圖例的字體樣式
color: '#fff',
},
data: ['類目A', '類目B']
},
//在容器中的位置
grid: {
left: '2%',
right: '3%',

到此這篇關(guān)于Vue中引入echarts的步驟及折線圖、柱狀圖常見配置項(xiàng)的文章就介紹到這了,更多相關(guān)Vue中引入echarts的步驟及常見配置項(xiàng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: