Vue集成Echarts 实测可以显示（柱状图和旭日图）

Vue集成Echarts

官网：https://echarts.apache.org/zh/index.html

不过没有集成vue的步骤 我实现了以后总结如下：

我们需要以下几个东西：

安装和引入echarts

# 安装echarts
npm install echarts --save

引入Echarts

#使用echarts的组件
Vue.use(echarts);
#可以通过$echarts记性操作
Vue.prototype.$echarts = echarts

组件中引入echarts

import echarts from 'echarts'

视图层代码

<!-- 做一个放echarts的 dom  id需要绑定-->
<div id="main" :style="{width: '1400px', height: '400px'}"></div>

数据层代码

// 初始化echarts
this.myChart = echarts.init(document.getElementById('main'));

// 设置echarts的参数
this.myChart.setOption({
    // 设置标题
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
    // 设置X轴
                    xAxis: {
                        data: this.xAxis
                    },
    // 设置Y轴
                    yAxis: {},
    // 设置参数
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: this.cData
                    }]
                });

完成的代码为：

<template>

    <div id="main" :style="{width: '1400px', height: '400px'}"></div>

</template>

<script>
    import echarts from 'echarts'

    export default {
        name: "rule-info-view-charts",
        components: {
            echarts
        },
        data(){
            return{
                myChart:"",
                xAxis:['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                cData:[5, 20, 36, 10, 10, 20],
            }
        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
                  this.myChart = echarts.init(document.getElementById('main'));
                  this.setChartsInfo()

            },
            setChartsInfo(){
                this.myChart.setOption({
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    xAxis: {
                        data: this.xAxis
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: this.cData
                    }]
                });
            },

        }
    }

</script>

<style scoped>

</style>

其中setOption里面的是可以变的，其他的都是模板。 剩下的就需要我们一点一点琢磨了。

实例：集成旭日图

官方文档：旭日图

series: {
        type: 'sunburst',
        data: [{
            name: 'A',
            value: 10,
            children: [{
                value: 3,
                name: 'Aa'
            }, {
                value: 5,
                name: 'Ab'
            }]
        }, {
            name: 'B',
            children: [{
                name: 'Ba',
                value: 4
            }, {
                name: 'Bb',
                value: 2
            }]
        }, {
            name: 'C',
            value: 3
        }]
    }

将这个放入之前说的this.myChart.setOption()，里面

即：

setChartsInfo(){
                this.myChart.setOption({
                    series: {
                        type: 'sunburst',
                        data: [{
                            name: 'A',
                            value: 10,
                            children: [{
                                value: 3,
                                name: 'Aa'
                            }, {
                                value: 5,
                                name: 'Ab'
                            }]
                        }, {
                            name: 'B',
                            children: [{
                                name: 'Ba',
                                value: 4
                            }, {
                                name: 'Bb',
                                value: 2
                            }]
                        }, {
                            name: 'C',
                            value: 3
                        }]
                    }
                });
            }

整体代码为：

<template>

    <div id="main" :style="{width: '1400px', height: '400px'}"></div>

</template>

<script>
    import echarts from 'echarts'

    export default {
        name: "rule-info-view-charts",
        components: {
            echarts
        },
        data(){
            return{
               
            }
        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
              this.myChart = echarts.init(document.getElementById('main'));
              this.setChartsInfo()
                this.dataDeal()

            },
            setChartsInfo(){
                this.myChart.setOption({
                    series: {
                        type: 'sunburst',
                        data: [{
                            name: 'A',
                            value: 10,
                            children: [{
                                value: 3,
                                name: 'Aa'
                            }, {
                                value: 5,
                                name: 'Ab'
                            }]
                        }, {
                            name: 'B',
                            children: [{
                                name: 'Ba',
                                value: 4
                            }, {
                                name: 'Bb',
                                value: 2
                            }]
                        }, {
                            name: 'C',
                            value: 3
                        }]
                    }
                });
            },


        }
    }

</script>

<style scoped>

</style>