【vue】echarts 可视化图库的引入和使用
1、npm 下载 echarts
npm install echarts@4 --save
2、全局引入main.js或者按需引入
import echarts from "echarts";
3、创建一个容器 div ,并赋予一个 ref,之后要通过这个 ref 属性来建立图表实例
<div id="echart_type" style="height: 250px;" ref="articleEChart"></div>
4、创建图表实例,并进行配置
data() {
return {
//文章图例
articleEChart: null,
}
},
mounted() {
this.init()
},
methods: {
//初始化获取数据
init() {
//获取文章统计
getArticleStatistics().then(res => {
if (res.code === 200) {
let data = res.rows
//初始化文章图表实例,传入图表div的ref和配置
this.articleEChart = echarts.init(this.$refs.articleEChart, "macarons");
this.articleEChart.setOption({
//提示的冒泡信息
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//具体的图表配置
series: [
{
name: "获取文章统计",
type: "pie",
roseType: "radius",
radius: [5, 70],
center: ["50%", "38%"],
data: data,
animationEasing: "cubicInOut",
animationDuration: 1000,
}]
})
}
})
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步