在Vue中使用Echarts
原创
前端可视化是一个前端最基本的技能，要想做的好看，还是得借助一下百度家的echarts，那要怎么在Vue中使用echarts？这个官网没有给出实例，实例基本都是在jquery里面使用，引入的例子。
Echarts官网：https://echarts.apache.org/zh/index.html
1:在项目里面安装echarts
cnpm install echarts --s2：在需要用图表的地方引入
import echarts from "echarts";图片.png
3：打开vue组件 继续写代码，代码如下：
<template>
<div id="app">
<!--为echarts准备一个具备大小的容器dom-->
<div id="main" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "",
data() {
return {
charts: "",
opinionData: ["3", "2", "4", "4", "5"],
};
},
methods: {
drawLine(id) {
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
trigger: "axis",
},
legend: {
data: ["近七日收益"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["1", "2", "3", "4", "5"],
},
yAxis: {
type: "value",
},
series: [
{
name: "近七日收益",
type: "line",
stack: "总量",
data: this.opinionData,
},
],
});
},
},
//调用
mounted() {
this.$nextTick(function () {
this.drawLine("main");
});
},
};
</script>
<style scoped>
</style>这个时候，可以看到，加载出的折线图了，后面可以继续进行完善。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读