本文主要介绍echarts在Vue中如何使用。
一、安装依赖echarts
npm install echarts -S
二、图表创建
2.1在main.js中,引入(全局)
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
2.2在.vue任意页面,如:index.vue
DOM代码
<div class="my-charts" ref="myChart"></div>
JS代码
export default {
data() {
return {};
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(this.$refs.myChart);
// 绘制图表
myChart.setOption({
title: {
text: "当周批