1、npm install echarts --save
2、在main.js中引入echarts
import * as echarts from "echarts"; Vue.prototype.$echarts = echarts;
3、在你要用到的vue页面
<template> <div class="box"> <div id="myChart" :style="{ width: '800px', height: '400px' }"></div> </div> </template> <script> export default { name: "hello", data() { return { msg: "fafa", }; }, mounted() { this.drawLine(); console.log(this.$echarts); }, methods: { drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById("myChart")); // 绘制图表 myChart.setOption({ xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], }, yAxis: { type: "value", }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: "line", }, ], }); }, }, }; </script> <style scoped> .box { margin-top: 50px; } </style>
注意:若想直接用官网例子,就直接把上边 myChart.setOption里内容替换官网的即可