1. 官网
https://github.com/ecomfe/vue-echarts/blob/HEAD/README.zh-Hans.md
2. 安装
2.1. 使用前要先安装echarts
vue-echarts
在使用前要先安装echarts
,不要只安装vue-echarts
这一个
npm i vue-echarts echarts -S
2.2. 安装core.js
npm i core.js -S
2.3. Vue 2 下最好指定版本安装
npm i echarts@4.2.1 -S
npm i vue-echarts@4.0.1 -S
3. 全局注入
main.js
中全局注册组件
import 'echarts'
import ECharts from 'vue-echarts'
Vue.component('VueEcharts', ECharts)
3.1. 基本使用
<template>
<VueEcharts :options="option_column" style="height: 400px"></VueEcharts>
</template>
<script>
export default {
data() {
return {
option_column: {
title: { text: "Column Chart" },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
},
};
},
};
</script>
4. 单页面引入
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/legendScroll'
import 'echarts/lib/component/legend'
export default {
components: {
'v-chart': ECharts
},
}
4.1. 使用
<template>
<v-chart :options="option_column" style="height: 400px"></v-chart>
</template>