前端可视化是一个前端最基本的技能，要想做的好看，还是得借助一下百度家的echarts，那要怎么在Vue中使用echarts？这个官网没有给出实例，实例基本都是在jquery里面使用，引入的例子。
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>
这个时候，可以看到，加载出的折线图了，后面可以继续进行完善。
