在Vue中使用echarts,简单使用,组件化使用分析
程序员文章站
2022-06-28 18:21:48
在Vue中使用echarts安装版本依赖使用使用 -(全局引入)使用-(按需引入)在项目中不可避免的需要对数据进行可视化处理,也就是用图表展示,就把之前常用的echarts拿来分析一下,先看下效果好了,下面进入主题安装npm install echarts -S版本依赖"vue": "^2.5.2","echarts": "^4.8.0",不写版本依赖的都是耍流氓(版本不对导致出错的案例罄竹难书呀)使用使用 -(全局引入)在main.js中// 引入echartsimpor...
在项目中不可避免的需要对数据进行可视化处理,也就是用图表展示,就把之前常用的echarts拿来分析一下,先看下效果
好了,下面进入主题
安装
npm install echarts -S
版本依赖
"vue": "^2.5.2",
"echarts": "^4.8.0",
不写版本依赖的都是耍流氓(版本不对导致出错的案例罄竹难书呀)
使用
这里展示了3中使用方法,循序渐进,方便大家学习
使用 -(全局引入)
在main.js中
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
在页面中, 比如echart.vue中
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
export default {
data () {
return {}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
注意:我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中
使用-(按需引入)
由于全局引入会将所有的echarts图表打包,导致体积过大
在echarts.vue文件中
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
注意:使用 require 而不是 import
完整例子-大伙可以直接复制拿走使用
<template>
<div class="testpage">
<div class="pageCon">
<!-- 实验成功 -->
<div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
</div>
</div>
</template>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data() {
return {};
},
components: { },
mounted() {
this.drawLine();
},
created() {},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
title: { text: "在Vue中使用echarts" },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
});
}
}
};
</script>
<style ></style>
使用-(组件化)
提到vue组件化是重要的一点,可以复用,方便维护。。。
那接下来我就简单的将他封装成一个简单的组件
业务场景:在详情页中用饼状图展示总费用的分布
效果图
我已精简代码,大家可将axios获取数据那一块忽略掉,直接看数据
1. 创建echarts.vue组件
<template>
<div class="echartsWrap">
<div id="myChart" class="myChart"></div>
</div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
name: "echerts",
props: {
datas: {
style: Array,
default: []
}
},
data() {
return {};
},
components: {},
mounted() {
this.drawLine();
},
created() {},
methods: {
drawLine() {
console.log("this.datas: ", this.datas);
// 检查是否有数据
if (!this.datas) {
return;
}
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
title: { x: "center" },
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: this.datas,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
});
}
}
};
</script>
<style lang="stylus">
.myChart{
width: 100%;
min-height: 220px;
}
</style>
2.页面中使用
<div v-if="echartsData">
<echarts :datas="echartsData"></echarts>
</div>
import Echarts from "@/components/echarts/echarts";
export default {
name: "goodDetail",
data() {
return {
echartsData: [],
};
},
components: {
appHead,
Echarts
},
mounted() {
this.getData();
},
methods: {
// 获取数据 -
getData() {
let params = {
code: this.$route.query.id
};
this.$api.goods
.goodsDetail(params)
.then(res => {
// 处理echarts的数据
this.handleChartsData(this.gdData.goods_info);
})
.catch(error => {
console.log("error: ", error);
this.myloading = false;
});
},
// 处理echarts的数据
handleChartsData(datas) {
console.log("data: ", datas);
this.echartsData = [
{
value: datas.price,
name: "网店售价"
},
{
value: datas.consumer_bond,
name: "消保金"
},
{
value: datas.skill_price,
name: "技术年费"
},
{
value: datas.poundage,
name: "居间费"
}
];
console.log('处理后的echarts数据: ', this.echartsData);
}
}
};
到这里,对echart的简单使用,组件化封装分析完毕,有问题的小伙伴可以随时问我哈
最后如果帮了你的大忙的话,请小伙伴们点个赞或打赏个几毛钱。
本文地址:https://blog.csdn.net/u012570307/article/details/107529190
上一篇: 红糖水什么时候喝好,你知道的正确吗
下一篇: 新机长这样“炼成”