文章目录
在vue中插入Echarts
1. 获取echarts
用图形化方式创建的脚手架项目,在依赖中添加echarts 4.9.0
或者 通过npm 获取echarts:npm install echarts@4.9.0 --save
安装完后,在项目mode_modules
文件夹下,会多出一个文件echarts
2. 在vue中项目中引入echarts
在main.js中添加下面两行代码
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
注:
import echarts from 'echarts'
引入echarts后,不能全局使用echarts,
所以通过Vue.prototype
将echarts保存为全局变量
3. 新建BarChart.vue
文件
(1) 在template中
添加一个存放echarts 的div
容器
(2) 添加myEcharts()
方法,将官方文档中script内容复制到myEcharts()中
(3) 修改echarts.init()
为this.$echarts.init()
[因为上面第二步,将echarts保存到全局变量$echarts
中
(4) 在mounted
中调用myEcharts()
方法
<template>
<div class="bar-chart">
{
{
"barData:" + barData}}
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</template>
<script>
export default {
name: 'BarChart',
methods: {
showBarChart() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('main'))
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例',
},
tooltip: {
},
legend: {
data: ['销量'],
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
},
},
// 在实例创建完成后立即被调用
//使用ES6写法。mounted() { }等同mounted:function() { }
mounted() {
this.showBarChart()
}
</script>