Vue2 下 Echarts的使用

Vue2 下 Echarts的使用

1、安装组件

npm install echarts vue-echarts --save

2、使用

2.1、配置为全局组件方式

全局配置为公有组件

// main.js
import "echarts"
import VueEcharts from "vue-echarts"

Vue.component("VueEcharts",VueEcharts)

<template>
	<VueEcharts :option="option" style="width:500px;height:400px"></VueEcharts>
</template>
<script>
	export default {
        data(){
            return {
                option:{}
            }
        },
        methods:{
            getList(){
                //
                this.axios.get(".....").then(res=>{
                    const d = res.data;
                    this.option = {
                        xAxis: {
                                type: 'category',
                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                              },
                              yAxis: {
                                type: 'value'
                              },
                              series: [
                                {
                                  data: [120, 200, 150, 80, 70, 110, 130],
                                  type: 'bar'
                                }
                              ]
                   }
                })
            }
        }
    }
</script>

2.2、一般页面使用方式

先引用组件，再注册，之后用标签（子组件）方式来使用

<template>
	<VueEcharts :option="option" style="width:500px;height:400px"></VueEcharts>
</template>
<script>
    // 引入Echarts组件
    import "echarts"
	import VueEcharts from "vue-echarts"
	export default {
        // 注册组件
        components: {
            VueEcharts,
        },
        data(){
            return {
                option:{}
            }
        },
        methods:{
            getList(){
                //
                this.axios.get(".....").then(res=>{
                    const d = res.data;
                    this.option = {
                        xAxis: {
                                type: 'category',
                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                              },
                              yAxis: {
                                type: 'value'
                              },
                              series: [
                                {
                                  data: [120, 200, 150, 80, 70, 110, 130],
                                  type: 'bar'
                                }
                              ]
                   }
                })
            }
        }
    }
</script>

2.3 图表格式

通过修改 属性 option来修改图表的格式。它的格式可能参考下面的链接，动态值要结合当前程序动态生成。

3、参考链接

https://echarts.apache.org/zh/index.html