1.vue2项目npm下载echarts(引入5.0以上版本会报错,这里推荐4.8.0)
npm install [email protected] -S
2.项目的main.js全局绑定(这里是vue2的引入vue3略有不同)
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
3.页面代码
<template>
<div class="chart" id="chart" style="width: 600px; height: 400px"></div>
</template>
<script>
export default {
mounted() {
// 创建echarts实例
var myChart = this.$echarts.init(document.getElementById("chart"));
var option = {
title: {
text: '月销量'
},
// 提示框
tooltip: {
},
// 图例
legend: {
data: ['销量']
},
// 表示x轴坐标
xAxis: {
data: ['oppo', 'vivo', 'iphone', '小米', '三星', '魅族']
},
// 表示y轴坐标
yAxis: {
},
//
series: [
{
name: '销量',
type: 'bar',
data: [3500, 2200, 4500, 6500, 200, 3000]
}
]
};
myChart.setOption(option);
},
methods: {
},
}
</script>
<style>
</style>