vue-echarts的基本使用

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>