vue中使用echarts

Posted 2020-10-24 ArcheWong

1.安装

npm install echarts -S

2.引入

1. 全局引入

main.js中

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts 

1. 按需引入

全局引入会将所有的echarts图表打包，导致体积过大，最好还是按需引入

let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie');
require('echarts/lib/component/grid');
require('echarts/lib/component/legend');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/geo');
require('echarts/lib/component/axisPointer');
require('echarts/lib/component/dataZoom');
require('echarts/lib/component/timeline');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/title');

3. 使用

1. 画一个饼图

html

<div id="os_chart" style="margin:0 auto;width:750px; height:500px"></div>

js

data() {
    return {
        os_option: {
            title : {
                show:false,
                x:'center'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: [],
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series : [
                {
                    name: '操作系统',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        },
    }
},         
methods: {
    initChart(){
        this.os_chart = echarts.init(document.getElementById('os_chart'))
    },
    initData(){
        this.$http.get('/api/statistics/index').then((res) => {
            if(res.data.success){
                this.os_option.legend.data = res.data.data.os.x;
                this.os_option.series[0].data = res.data.data.os.y;
                this.os_chart.setOption(this.os_option);
            }
        });
    },

},
mounted() {
    this.initChart();
    this.initData();
},

1. 画一个中国地图数据

html

<div id="china_map_chart" style="margin:0 auto;width:750px; height:500px"></div>

js

let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/map');
require('echarts/lib/component/grid');
require('echarts/lib/component/legend');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/geo');
require('echarts/lib/component/axisPointer');
require('echarts/lib/component/dataZoom');
require('echarts/lib/component/timeline');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/title');
//地图数据是自己下载的，按照存放数据的路径引入
import {china} from '../plugins/chart/data/map/china';
import {world} from '../plugins/chart/data/map/world';

export default {
    data() {
        return {
           china_map_option: {
                title: {
                    show:false,
                    left: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        var value = (params.value + '').split('.');
                        value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');

                        return params.seriesName + '<br/>' + params.name + ' : ' + value;
                    }
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        restore: {},
                    }
                },
                visualMap: {
                    min: 0,
                    max: 38000000,
                    text:['高','低'],
                    range: [0, 38000000],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue','yellow', 'orangered']
                    }
                },
                series: [
                    {
                        name: '国内访问来源统计',
                        type: 'map',
                        mapType: 'china',
                        roam: true,
                        itemStyle:{
                            emphasis:{label:{show:true}}
                        },
                        data: [],
                    }
                ]
            },
        }
    },         
    methods: {
        initChart(){
            this.china_map_chart = echarts.init(document.getElementById('china_map_chart'))
            echarts.registerMap('china', china);
        },
        initData(){
            this.$http.get('/api/statistics/index').then((res) => {
                if(res.data.success){
                    this.china_map_option.series[0].data = res.data.data.china;
                    this.china_map_chart.setOption(this.china_map_option);
                }
            });
        },
    
    },
    mounted() {
        this.initChart();
        this.initData();
    },
}

这里地图数据原始数据是自己引入的，官方文档提示，ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

javascript 引入示例

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

JSON 引入示例

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

我这里使用的是json数据，实际上我们不一定要使用ajax，只要获得数据即可，我利用下面的方式。

export const china = {};

提供数据下载 ： 中国地图 ， 世界地图