//echarts的第三种使用方式  --开发成插件

import echarts from 'echarts'

//导入国内地图文件
import 'echarts/map/js/china'





const install = function (Vue, options) {
    //添加实例方法。缺点是不安全,可以在子组件被任意修改
    Vue.prototype.$myMethod = function (methodOptions) {

    }





    //建议用下面这种写法,安全。原理是给Vue.prototype添加myChart属性,属性就会有get和set方法,我们使用的是get方法,定义了line(id)和bar(id)方法
    Object.defineProperties(Vue.prototype, {
        $myChart: {
            get() {
                return {
                    //折线图
                    line(id) {
                        var myChart = echarts.init(document.getElementById(id));
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: 'ECharts 入门示例'
                            },
                            tooltip: {},
                            legend: {
                                data: ['销量']
                            },
                            xAxis: {
                                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                            },
                            yAxis: {},
                            series: [
                                {
                                    name: '销量',
                                    type: 'line',
                                    data: [5, 20, 36, 10, 10, 20]
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    },
                    //柱状图
                    bar(id) {
                        var myChart = echarts.init(document.getElementById(id));
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: 'ECharts 入门示例'
                            },
                            tooltip: {},
                            legend: {
                                data: ['销量']
                            },
                            xAxis: {
                                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                            },
                            yAxis: {},
                            series: [
                                {
                                    name: '销量',
                                    type: 'bar',
                                    data: [5, 20, 36, 10, 10, 20]
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    },
                    //国内地图
                    chinaMap(id, data){
                        var myChart = echarts.init(document.getElementById(id));
                        var option = {
                            tooltip: { //悬浮弹窗
                                triggerOn: 'click', //提示框触发的条件
                                enterable: true, //鼠标是否可进入提示框浮层中,默认为false
                                formatter(item) { //item=下面serves里面的data里面的每一项 //[{}]data{} a b c d
                                    return '<a href="#/city/' + item.name + '"style="color:#fff">省份:'+ item.name + '--详情</a>'
                                }
                            },
                            visualMap: [{ //映射高亮颜色
                                orient: "horizontal", //水平的
                                type: "piecewise", //离散
                                bottom: 0,
                                textGap: 4,
                                itemGap: 4,
                                itemWidth: 10,
                                itemHeight: 10,
                                padding: 2,
                                textStyle: {
                                    fontSize: 9,
                                },
                                pieces: [ //配置颜色区间
                                    {
                                        min: 0,
                                        max: 0,
                                        color: "#FFFFFF"
                                    },
                                    {
                                        min: 1,
                                        max: 9,
                                        color: "FAEBD2"
                                    },
                                    {
                                        min: 10,
                                        max: 99,
                                        color: "#E9A188"
                                    },
                                    {
                                        min: 100,
                                        max: 499,
                                        color: "#D56355"
                                    },
                                    {
                                        min: 500,
                                        max: 999,
                                        color: "BB3937"
                                    },
                                    {
                                        min: 1000,
                                        max: 10000,
                                        color: "#772526"
                                    },
                                    {
                                        min:10000,
                                        color: "#480F10"
                                    }
                                ]
                            }],
                            series: [{
                                name: "省",
                                type: "map", //地图 bar line map
                                map: "china", //中国地图 需要引入地图china.js
                                roam: false,
                                zoom: 1.1,
                                aspectScale: 0.75,
                                top: 20,
                                layoutCenter: ['5%','5%'],
                                label: {
                                    normal: {
                                        show: true,
                                        textStyle: {
                                            fontSize: 8
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal:{
                                        areaColor: 'rgba(0,255,236,0)',
                                        borderColor: 'rgba(0,0,0,0.2)',
                                    },
                                    emphasis: { //选中的区域颜色即阴影效果
                                        areaColor: 'rgba(255,180,0,0.8',
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowBlur: 20,
                                        borderWidth: 0,
                                    }
                                },
                                
                                // data  //接口返回的数据
                                data:[   //自己写死的数据,用于测试
                                    { name: '拉萨', value:139 },
                                    { name: '广东', value:200 },
                                    { name: '澳门', value:24 },
                                    { name: '台湾', value:2000 },
                                    { name: '香港', value:2000 },
                                    { name: '贵州', value:194 },
                                    { name: '吉林', value:200 },
                                    { name: '新疆', value:99 },
                                    { name: '宁夏', value:122 },
                                    { name: '内蒙古', value:99 },
                                    { name: '甘肃', value:200 },
                                    { name: '天津', value:200 },
                                    { name: '山西', value:100 },
                                    { name: '辽宁', value:200 },
                                    { name: '黑龙江', value:200 },
                                    { name: '海南', value:200 },
                                    { name: '河北', value:200 },
                                    { name: '陕西', value:200 },
                                    { name: '云南', value:50 },
                                    { name: '广西', value:100 },
                                    { name: '福建', value:200 },
                                    { name: '上海', value:600 },
                                    { name: '江苏', value:200 },
                                    { name: '四川', value:200 },
                                    { name: '山东', value:200 },
                                    { name: '重庆', value:200 },
                                    { name: '安徽', value:300 },
                                    { name: '安徽', value:200 },
                                    { name: '北京', value:200 },
                                    { name: '西藏', value:300 },
                                    { name: '甘肃', value:8 },
                                    { name: '青海', value:99 },
                                    { name: '陕西', value:200 },
                                    { name: '江西', value:5 },
                                    { name: '温州', value:5 },
                                    { name: '安徽', value:5 },
                                    { name: '河南', value:200 },
                                    { name: '湖北', value:100 },
                                    { name: '湖南', value:200 },
                                    { name: '浙江', value:100 },
                                ]
                            }]
                        }
                        myChart.setOption(option);
                    },
                    //世界地图
                }
            },
            set() {

            }
        }
    })
}

export default install;