在Vue中使用Echarts
程序员文章站
2024-01-07 19:46:46
...
前端可视化是一个前端最基本的技能,要想做的好看,还是得借助一下百度家的echarts,那要怎么在Vue中使用echarts?这个官网没有给出实例,实例基本都是在jquery里面使用,引入的例子。
Echarts官网:https://echarts.apache.org/zh/index.html
1:在项目里面安装echarts
cnpm install echarts --s
2:在需要用图表的地方引入
import echarts from "echarts";
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>
这个时候,可以看到,加载出的折线图了,后面可以继续进行完善。
推荐阅读
-
在Vue中使用Echarts
-
详细介绍Session在PHP中的使用(1)_PHP教程
-
在VS2008中使用jQuery智能感应的方法_jquery
-
浅谈vue2的$refs在vue3组合式API中的替代方法
-
Vue中的混入的使用(vue mixins)
-
在PHP框架中需要使用smarty模板吗?
-
vue2.0在table中全选和反选
-
PHP mb_strwidth在实际使用中的问题解析
-
请教在apache2.4中 DefaultType功能怎样使用其它设置进行替代
-
VS中利用ASP.net做网站,使用Gridview显示数据列表,用IIS发布后,在IE浏览器和360浏览器中看到样式不一样求高手指教!_html/css_WEB-ITnose