开发成vue插件 echarts

0. 准备

1. 安装echarts，

1.plugins/echart.js

import echarts from "echarts"
//不导入一下三个，地图显示不完全（不太理解，有理解的，请赐教）
import world from 'echarts/map/json/china.json'
import  'echarts/map/js/china'
echarts.registerMap('world', world)

const install = function (Vue, options) {
    // 添加实例方法 
    Object.defineProperties(Vue.prototype, {
        $myChart: {
            get() {
                return {
                 
                    ChinaMap(id){
                        var myChart = echarts.init(document.getElementById(id));
                        var option = {
                            title: {
                                text: '中华人民共和国2110年13月平均降雨量',
                                subtext: '练习地图',
                                x: 'center'
                            },
                            tooltip: {//提示框组件。
                                trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                            },
                            visualMap: {//颜色的设置  dataRange
                                x: 'left',
                                y: 'center',
                                splitList: [
                                    { start: 1500, color: '#4682B4' },
                                    { start: 900, end: 1500, color: 'lightskyblue' },
                                    { start: 310, end: 1000, color: '#FF7F50' },
                                    { start: 200, end: 300, color: '	#FF4500' },
                                    { start: 50, end: 200, color: 'lightcoral', label: '10 到 200（想念暴雨）' },
                                    { start: 0, end: 50, label: '<50 干巴巴', color: 'darkred' },
                                ],
                            },
                            series: [
                                {
                                    name: '降雨量（毫米）',
                                    type: 'map',
                                    mapType: 'china',
                                    roam: true,//是否开启鼠标缩放和平移漫游
                                    itemStyle: {
                                        normal: {//是图形在默认状态下的样式
                                            label: {
                                                show: true,//是否显示标签
                                                textStyle: {
                                                    color: "rgb(249, 249, 249)"
                                                }
                                            }
                                        },
                                        emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                            label: { show: true }
                                        }
                                    },
                                    top: "3%",
                                    data: [
                                        { name: '北京', value: 1122 },
                                        { name: '天津', value: Math.round(Math.random() * 2000) },
                                        { name: '上海', value: Math.round(Math.random() * 2000) },
                                        { name: '重庆', value: Math.round(Math.random() * 2000) },
                                        { name: '河北', value: 0 },
                                        { name: '河南', value: Math.round(Math.random() * 2000) },
                                        { name: '云南', value: 500 },
                                        { name: '辽宁', value: 305 },
                                        { name: '黑龙江', value: Math.round(Math.random() * 2000) },
                                        { name: '湖南', value: 200 },
                                        { name: '安徽', value: Math.round(Math.random() * 2000) },
                                        { name: '山东', value: Math.round(Math.random() * 2000) },
                                        { name: '新疆', value: 34 },
                                        { name: '江苏', value: Math.round(Math.random() * 2000) },
                                        { name: '浙江', value: Math.round(Math.random() * 2000) },
                                        { name: '江西', value: Math.round(Math.random() * 2000) },
                                        { name: '湖北', value: Math.round(Math.random() * 2000) },
                                        { name: '广西', value: Math.round(Math.random() * 2000) },
                                        { name: '甘肃', value: Math.round(Math.random() * 2000) },
                                        { name: '山西', value: Math.round(Math.random() * 2000) },
                                        { name: '内蒙古', value: Math.round(Math.random() * 2000) },
                                        { name: '陕西', value: Math.round(Math.random() * 2000) },
                                        { name: '吉林', value: Math.round(Math.random() * 2000) },
                                        { name: '福建', value: Math.round(Math.random() * 2000) },
                                        { name: '贵州', value: Math.round(Math.random() * 2000) },
                                        { name: '广东', value: Math.round(Math.random() * 2000) },
                                        { name: '青海', value: Math.round(Math.random() * 2000) },
                                        { name: '西藏', value: 2000 },
                                        { name: '四川', value: Math.round(Math.random() * 2000) },
                                        { name: '宁夏', value: Math.round(Math.random() * 2000) },
                                        { name: '海南', value: Math.round(Math.random() * 2000) },
                                        { name: '台湾', value: Math.round(Math.random() * 2000) },
                                        { name: '香港', value: Math.round(Math.random() * 2000) },
                                        { name: '澳门', value: Math.round(Math.random() * 2000) }
                                    ]
                                }
                            ]
                        };
                        myChart.setOption(option); 
                    },
                     
                }
            }
        }
    })

}

//将封装好的插件导出
export default install

2.main.js

将写好的插件，添加到main.js

import  echarts from './plugins/echart' 
Vue.use(echarts)

3. 具体组件使用

    <template>
    <div>
        <h2>引入Echart图表</h2>
        <div id="main2" style="width: 600px; height: 600px ;"></div>
        <hr>

    </div>
</template>
<script>
   export default{
    mounted() {
        this.$myChart.ChinaMap('main2')
    },
   }
</script>    

小结：

• 参数的传递问题
• 地图显示不完全问题

tips：新人自学，敬请诸君，不吝赐教。