1.安装echarts

npm i echarts

 

2.导入echarts

说明：任意组件页面都可以导入echarts。如果在main.js里面导入，那么只需要导入一次就可以应用于任意页面。

import * as echarts from "echarts"

3.创建容器

说明：它具有一个指定的id属性为echarts-bar，以及一个ref属性为bar1。

      <div id="echarts-bar" ref="bar1">
        </div>

4.初始化容器

说明：echarts.init()里面是ECharts图表的容器。

echarts.init( document.querySelector("#echarts-bar"))与echarts.init(this.$refs.bar1)相同。options是配置项。

  echarts.init(this.$refs.bar1).setOption(options)

5.添加配置项

 5.1打开官网

说明：打开echarts官网，找到示例。

Examples - Apache ECharts

5.2点击任意图形

5.3options

说明：将options放入上方初始化容器里面。mounted是页面渲染完成时候自动调用initEcharts方法。

5.4注意

说明：如果页面是空白，那么是容器没有宽高。给容器设置宽高就可以了。

6.展示

7.源码 

<template>
    <div>
        <!-- <router-view></router-view> -->
        <div id="echarts-bar" ref="bar1">
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts"
export default {
    name: 'Index.vue',
    mounted() {
        this.initEcharts()
    },
    methods: {
        change() {
            console.log(this.$refs);
        },
        initEcharts() {
            const options = {
                title: {
                    text: 'Waterfall Chart',
                    subtext: 'Living Expenses in Shenzhen'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        var tar = params[1];
                        return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    splitLine: { show: false },
                    data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'Placeholder',
                        type: 'bar',
                        stack: 'Total',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                        },
                        emphasis: {
                            itemStyle: {
                                borderColor: 'transparent',
                                color: 'transparent'
                            }
                        },
                        data: [0, 1700, 1400, 1200, 300, 0]
                    },
                    {
                        name: 'Life Cost',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        data: [2900, 1200, 300, 200, 900, 300]
                    }
                ]
            }

            echarts.init(this.$refs.bar1).setOption(options)
        }
    }

};
</script>

<style>
#echarts-bar {
    width: 300px;
    height: 300px;
}
</style>