写在前:这是一个使用vue-cli 4 引入 echarts 的案例,最简单的demo。全局使用。 官网链接
1、 使用npm 获取 echarts
npm install echarts --save
其他:卸载
npm uninstall echarts
2、 需要用到的页面,使用require
<template>
<div id="main" ref="chart" style="width: 600px;height:400px;">
</div>
</template>
// 方法内引入
const chart_div = this.$refs.chart;
let echarts = require('echarts');
const myChart = echarts.init(chart_div);
第二个方式:
1.下载指定版本 4.9.0
npm install echarts@4.9.0 --save
2.全局引入 main.js
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.使用页面使用
<template>
<div id="main" ref="chart" style="width: 600px;height:400px;">
</div>
</template>
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 使用ref $refs 来标识div 获取dom元素
// let myChart = this.$echarts.init(document.getElementById('myChart'));
const chart_div = this.$refs.chart;
const myChart = this.$echarts.init(chart_div);
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
}
}
注: 当前5.0.0只使用第一种方法