Vue项目中使用echarts教程

Vue项目中使用echarts教程

准备工作

npm 安装ECharts

npm install echarts --save

引入 ECharts

项目入口文件main.js中引入Echarts

老版本引入方式

import echarts from 'echarts';
// 或者按需引入
import echarts from 'echarts/lib/echarts';

Vue.prototype.$echarts = echarts 

新版本引入方式

import * as echarts from 'echarts';
// 按需引入
import * as echarts from 'echarts/lib/echarts';

Vue.prototype.$echarts = echarts 

ECharts初体验

1.为 ECharts 准备一个具备大小(宽高)的 DOM

2.基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('main'));
3.指定图表配置项数据(option)
var option = {
    title: {   //标题组件
        text: 'ECharts 入门示例'
    },
    tooltip: {}, //提示组件
    legend: {    //图例组件
        data:['销量']
    },
    xAxis: {     //x轴组件
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},  //y轴组件
    series: [{   
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
4.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
运行vue项目,显示结果

Vue项目中使用echarts教程_第1张图片

完整代码





快速入门绘制其他类型的图

Vue项目中使用echarts教程_第2张图片
Vue项目中使用echarts教程_第3张图片
Vue项目中使用echarts教程_第4张图片

Echarts基础概念

系列(series)

在 echarts 里,系列是指:一组数值以及他们映射成的图。

一个系列包含的要素至少有:一组数值、图表类型(series.type)、以及其他的关于这些数据如何映射成图的参数。

echarts 里系列类型(series.type)就是图表类型。系列类型至少有:line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、map (地图) 、radar (雷达图) 、 gauge (仪表盘) 等.

如下图,右侧的 option 中声明了三个 系列pie(饼图系列)、line(折线图系列)、bar(柱状图系列),每个系列中有他所需要的数据(series.data)。

Vue项目中使用echarts教程_第5张图片

另一种配置方式,系列的数据从dataset中取:

Vue项目中使用echarts教程_第6张图片

组件(component)

echarts 中至少有这些组件:

xAxis(直角坐标系 X 轴)

yAxis(直角坐标系 Y 轴)

grid(直角坐标系底板)

series(系列)

legend (图例组件)

title (标题组件)

dataZoom(数据区缩放组件)

visualMap(视觉映射组件)

tooltip(提示框组件)

toolbox(工具栏组件)

angleAxis(极坐标系角度轴)

radiusAxis(极坐标系半径轴)

polar(极坐标系底板)

geo(地理坐标系)等

Vue项目中使用echarts教程_第7张图片

描述图表(option)

使用 option来描述其对图表的各种需求,包括:有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等. 总的来说 , option 由一个个组件构成

option = {
   legend: {...},
	grid: {...},
	tooltip: {...},
	toolbox: {...},
	dataZoom: {...},
	visualMap: {...},
    xAxis: [
    {type: 'category', ...}
	],
	yAxis: [{...}],
   series: [
    {type: 'line', data: [ ... ]}
 }]
};

组件的定位

类css的绝对定位

不同的组件、系列,常有不同的定位方式。

多数组件和系列,都能够基于 top / right / down / left / width / height 绝对定位。 这种绝对定位的方式,类似于 CSS 的绝对定位(position: absolute)。绝对定位基于的是 echarts 容器 DOM 节点。

取值方式:

  • 绝对数值(例如 bottom: 54 表示:距离 echarts 容器底边界 54 像素)。
  • 或者基于 echarts 容器高宽的百分比(例如 right: '30%' 表示:距离 echarts 容器右边界的距离是 echarts 容器宽度的 30%

如下图的例子,对 grid组件(也就是直角坐标系的底板)设置 leftrightheightbottom 达到的效果。

Vue项目中使用echarts教程_第8张图片

中心半径定位

pie (饼图) 就可以使用中心半径定位

中心半径定位,往往依据center(中心)、radius(半径)来决定位置。

Vue项目中使用echarts教程_第9张图片

坐标系

很多系列,例如 line(折线图)、bar(柱状图)、scatter(散点图)等等,需要运行在 “坐标系” 上。

我们以最常见的直角坐标系来举例。直角坐标系中,包括有 xAxisyAxisgrid(直角坐标系底板)三种组件。xAxisyAxisgrid 自动引用并组织起来,共同工作。

如下图: 只声明了 xAxisyAxis 和一个 scatter(散点图系列),echarts 暗自为他们创建了 grid 并关联起他们:

Vue项目中使用echarts教程_第10张图片

两个 yAxis,共享了一个 xAxis。两个 series,也共享了这个 xAxis,但是分别使用不同的 yAxis,使用yAxisIndex来指定它自己使用的是哪个 yAxis
Vue项目中使用echarts教程_第11张图片

Echarts中的个性化样式

颜色主题(Theme)

Echarts4默认有两套主题hightdark

var chart = echarts.init(dom);  //默认为light

或者

var chart = echarts.init(dom, 'dark');

阴影的配置

ECharts 中有一些通用的样式,诸如阴影、透明度、颜色、边框颜色、边框宽度等,这些样式一般都会在系列(series)itemStyle里设置。

itemStyle: {
    // 阴影的大小
    shadowBlur: 200,
    // 阴影水平方向上的偏移
    shadowOffsetX: 0,
    // 阴影垂直方向上的偏移
    shadowOffsetY: 0,
    // 阴影颜色
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}

深色背景和浅色标签

背景色是全局的,所以直接在 option 下设置backgroundColor

setOption({
    backgroundColor: '#2c343c'
})

文本的样式也是全局的,设置textStyle

setOption({
    textStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
    }
})

调色盘

调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。 可以设置全局的调色盘,也可以设置系列自己专属的调色盘。

option = {
    // 全局调色盘。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074',            '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // 此系列自己的调色盘。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab',                  '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此系列自己的调色盘。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE',                      '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

高亮的样式:emphasis

在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,如下:

option = {
    series: {
        type: 'scatter',

        // 普通样式。
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        label: {
            show: true,
            // 标签的文字。
            formatter: 'This is a normal label.'
        },

        // 高亮样式。
        emphasis: {
            itemStyle: {
                // 高亮时点的颜色。
                color: 'blue'
            },
            label: {
                show: true,
                // 高亮时标签的文字。
                formatter: 'This is a emphasis label.'
            }
        }
    }
}

dataset管理数据

dataset 组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用

优点:

  • 能够贴近这样的数据可视化常见思维方式:(I) 提供数据,(II) 指定数据到视觉的映射,从而形成图表。
  • 数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。
  • 数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。
  • 支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。

入门例子

option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 提供一份数据。
        source: [
            ['product', '2015', '2016', '2017'],
            ['苹果', 43.3, 85.8, 93.7],
            ['香蕉', 83.1, 73.4, 55.1],
            ['车厘子', 86.4, 65.2, 82.5],
            ['橙子', 72.4, 53.9, 39.1]
        ]
    },
    // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
    xAxis: {type: 'category'},
    // 声明一个 Y 轴,数值轴。
    yAxis: {},
    // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
}

效果如下:

Vue项目中使用echarts教程_第12张图片

或者也可以使用常见的对象数组的格式:效果和上图一样

echarts中维度默认是按照column(列) 来映射的. 纬度解释: dataset中一个“维度”的意思是一行/列

option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 用 dimensions 指定了维度的顺序。直角坐标系中,
        // 默认把第一个维度映射到 X 轴上,第二个维度映射到 Y 轴上。
        dimensions: ['product', '2015', '2016', '2017'],
        source: [
            {product: '苹果', '2015': 43.3, '2016': 85.8, '2017': 93.7},
            {product: '香蕉', '2015': 83.1, '2016': 73.4, '2017': 55.1},
            {product: '车厘子', '2015': 86.4, '2016': 65.2, '2017': 82.5},
            {product: '橙子', '2015': 72.4, '2016': 53.9, '2017': 39.1}
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

把数据集( dataset )的行或列映射为系列(series)

用户可以使用 seriesLayoutBy 配置项,改变图表对于行列的理解。seriesLayoutBy 可取值:

  • ‘column’: 默认值。系列被安放到 dataset 的列上面。
  • ‘row’: 系列被安放到 dataset 的行上面。
option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['香蕉', 41.1, 30.4, 65.1, 53.3],
            ['车厘子', 86.5, 92.1, 85.7, 83.1],
            ['橙子', 24.1, 67.2, 79.5, 86.4]
        ]
    },
    xAxis: [
        {type: 'category', gridIndex: 0},
        {type: 'category', gridIndex: 1}
    ],
    yAxis: [
        {gridIndex: 0},
        {gridIndex: 1}
    ],
    grid: [
        {bottom: '55%'},
        {top: '55%'}
    ],
    series: [
        // 这几个系列会在第一个直角坐标系中,每个系列对应到 dataset 的每一行。
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        // 这几个系列会在第二个直角坐标系中,每个系列对应到 dataset 的每一列。
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
    ]
}

效果如下:

Vue项目中使用echarts教程_第13张图片

注意:dataset.source 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 dataset.sourceHeader: true 显示声明第一行(列)就是维度,或者 dataset.sourceHeader: false 表明第一行(列)开始就直接是数据。

series.encode数据到图形的映射方式

方式一: 指定列的索引来进行映射

option = {
    xAxis: {
        type: 'category'
    },
    yAxis: {},
    dataset: {
        source: [
            ['Jan', 34, 20, 'XX', 52],
            ['Feb', 28, 14, 'YY', 54],
            ['Mar', 45, 32, 'ZZ', 42],
            ['Apr', 69, 46],
            ['May', 39, 24],
            ['Jun', 43, 23],
            ['Jul', 33, 23],
            ['Aug', 23, 13],
            ['Sep', 23, 16],
            ['Oct', 33, 20],
            ['Nov', 39, 24],
            ['Dec', 22, 15]
        ]
    },
    series:[
        {
            type: "pie",
            center:['65%',60],
            radius:35,
            encode:{itemName:3,value:4}   //索引为3的列映射到itemName,索引为4的列映射到value
        },
        {
            type: 'line',
            encode: {x:0,y:1}   //索引为0的列映射到x轴,索引为1的列映射到y轴
        },
        {
            type: 'bar',
            encode: {x:0,y:2}  //索引为0的列映射到x轴,索引为2的列映射到y轴
        }
    ]
};

方式二: 通过指定纬度名来进行映射

option = {
    xAxis: {
        type: 'category'
    },
    yAxis: {},
    dataset: {
        source: [
            ['month', 'ldata', 'bdata', 'pitem', 'pvalue'],
            ['Jan', 34, 20, 'XX', 52],
            ['Feb', 28, 14, 'YY', 54],
            ['Mar', 45, 32, 'ZZ', 42],
            ['Apr', 69, 46],
            ['May', 39, 24],
            ['Jun', 43, 23],
            ['Jul', 33, 23],
            ['Aug', 23, 13],
            ['Sep', 23, 16],
            ['Oct', 33, 20],
            ['Nov', 39, 24],
            ['Dec', 22, 15]
        ]
    },
    series: [
        {
            type: "pie",
            center: ['65%', 60],
            radius: 35,
            encode: {itemName: 'pitem', value: 'pvalue'}  //通过纬度名为month的列映射到itemName,下面的同理
        },
        {
            type: 'line',
            encode: {x: 'month', y: 'ldata'}
        },
        {
            type: 'bar',
            encode: {x: 'month', y: 'bdata'}
        }
    ]
};

效果如下:

Vue项目中使用echarts教程_第14张图片

Echarts中的事件

ECharts 支持常规的鼠标事件类型,包括 'click''dblclick''mousedown''mousemove''mouseup''mouseover''mouseout''globalout''contextmenu' 事件。

事件绑定示例:

myChart.on('click', function (params) {
    // 控制台打印数据的名称
    console.log(params.name);
});

所有的鼠标事件包含参数 params,这是一个包含点击图形的数据信息的对象,如下格式:

{
    // 当前点击的图形元素所属的组件名称,
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名,类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
    // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data,dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}

地图

绘制某个地区的地图(本地json文件形式)

以福州为例:

1.准备好福州地区的json文件放在vue项目中

2.书写代码

<template>
    <div id="main"></div>
</template>

<script>
    export default {
        name: "FuZhou",
        methods: {
            initChart() {
                var myChart = this.$echarts.init(document.getElementById('main'));
                myChart.showLoading();
                let geoJson = require('../assets/json/fuzhou.json')
                myChart.hideLoading();
                this.$echarts.registerMap('福州', geoJson);
                var option = {
                    tooltip: {  //这里设置提示框
                        trigger: 'item',  //数据项图形触发
                        backgroundColor: "#fedcbd",  //提示框浮层的背景颜色。
                        formatter: p => {
                            let val = p.value;
                            if (!val) {
                                val = 0;
                            }
                            let txtCon = p.name + ":" + val + "人";
                            return txtCon;
                        }
                    },
                    visualMap: {
                        min: 50,
                        max: 400,
                        splitNumber: 5,
                        inRange: {
                            color: ['lightskyblue', 'yellow', 'orangered']
                        },
                    },

                    series: [{
                        name: '活跃人数分布',
                        type: 'map',
                        mapType: '福州',
                        roam: true,//是否开启鼠标缩放和平移漫游
                        zoom:1.2, //地图缩放比,默认为1
                        itemStyle:{//地图区域的多边形 图形样式
                            normal:{//是图形在默认状态下的样式
                                label:{
                                    show:true,//是否显示标签
                                    textStyle: {
                                        color: "black"
                                    }
                                }
                            },
                            emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                label:{show:false}
                            }
                        },
                        data: [
                            {
                                name: '马尾区',
                                value: 100,
                            },
                            {
                                name: '鼓楼区',
                                value: 145,
                            },
                            {
                                name: '长乐区',
                                value: 111,
                            },
                            {
                                name: '闽侯县',
                                value: 187,
                            },
                            {
                                name: '平潭县',
                                value: 190,
                            },
                            {
                                name: '福清市',
                                value: 55,
                            },
                            {
                                name: '永泰县',
                                value: 67,
                            },
                            {
                                name: '平潭县',
                                value: 99,
                            },
                            {
                                name: '晋安区',
                                value: 66,
                            },
                            {
                                name: '连江县',
                                value: 88,
                            },
                            {
                                name: '罗源县',
                                value: 333,
                            },
                            {
                                name: '连江县',
                                value: 200,
                            }
                        ]
                    }]
                }
                myChart.setOption(option);
            }
        },
        mounted() {
            this.initChart();
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0
    }

    html, body {
        width: 100%;
        height: 100%;
    }

    #main {
        width: 800px;
        height: 600px;
        margin: 0px auto;
        border: 1px solid #ddd;
    }
</style>

效果如下:

Vue项目中使用echarts教程_第15张图片

绘制中国地图(本地js文件形式)

1.准备china.js文件引入vue项目中

import '../assets/json/china.js'

2.书写代码

<template>
    <div id="main"></div>
</template>

<script>
    import '../assets/json/china.js'
    export default {
        name: "China",
        methods: {
            drawChart() {
                //2. 基于准备好的dom,初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('main'));
                //3. 指定图表的配置项和数据
                var option = {
                    tooltip : {//提示框组件。
                        trigger: 'item'//数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
                    },
                    legend: {
                        orient: 'horizontal',//图例的排列方向
                        x:'left',//图例的位置
                        data:['订单量']
                    },

                    visualMap: {//颜色的设置  dataRange
                        x: 'left',
                        y: 'center',
                        splitList: [
                            {start: 1500},
                            {start: 900, end: 1500},
                            {start: 310, end: 1000},
                            {start: 200, end: 300},
                            {start: 10, end: 200, label: '10 到 200(自定义label)'},
                            {start: 5, end: 5, label: '5(自定义特殊颜色)', color: 'black'},
                            {end: 10}
                        ],
                        text:['高','低'],// 文本,默认为数值文本
                        color: ['#E0022B', '#E09107', '#A3E00B']
                    },
                    toolbox: {//工具栏
                        show: true,
                        orient : 'vertical',//工具栏 icon 的布局朝向
                        x: 'right',
                        y: 'center',
                        feature : {//各工具配置项。
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},//数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。
                            restore : {show: true},//配置项还原。
                            saveAsImage : {show: true}//保存为图片。
                        }
                    },
                    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: 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: 0},
                                {name: '河南',value: Math.round(Math.random()*2000)},
                                {name: '云南',value: 5},
                                {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: 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: 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)}
                            ]
                        }
                    ]
                };
                //4.使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);


            }
        },
        mounted() {
            this.drawChart();
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0
    }

    html, body {
        width: 100%;
        height: 100%;
    }

    #main {
        width: 800px;
        height: 600px;
        margin: 150px auto;
        border: 1px solid #ddd;
    }

</style>

效果如下:

Vue项目中使用echarts教程_第16张图片

实现中国地图省 市 区/县下钻与返回

我这里采用的是高德地图所提供的服务:行政区查询服务(AMap.DistrictSearch)提供行政区信息的查询,使用该服务可以获取到行政区域的区号、城市编码、中心点、边界、下辖区域等详细信息,为基于行政区域的地图功能提供支持。

因为采用本地json文件或者js文件的形式的话文件太多,而且数据不是最新的

准备工作

1.准备好上面echarts的准备工作

2.首先,注册开发者账号,成为高德开放平台开发者

3.登陆之后,在进入「应用管理」 页面「创建新应用」

4.为应用添加key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

5.在vue项目的index.html文件中引入下面的js文件(替换你申请的key)

<!--引入高德地图JSAPI -->
<script src="//webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.DistrictSearch"></script>

<!--引入UI组件库(1.1版本) -->
<script src="//webapi.amap.com/ui/1.1/main.js"></script>

6.书写代码

<template>
    <div id="main">
        <div class="echarts">
            <div style="width:700px;height:600px" id="sctterMap">
            </div>
            <div class="mapChoose">
            <span v-for="(item,index) in parentInfo" :key="item.code">
                 <span class="title" @click="chooseArea(item,index)">{{item.cityName=='全国'?'中国':item.cityName}}</span>
                 <span class="icon" v-show="index+1!=parentInfo.length">></span>
            </span>
            </div>
        </div>
        <div id="tableContent">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="名称"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="area"
                        label="占地面积"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="people"
                        label="人口"
                        width="180">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import resize from "../echartsmap/mixins/resize.js";

    export default {
        name: "sctterMap",
        mixins: [resize],
        data() {
            return {
                myCharts: null,
                geoJson: {
                    features: []
                },
                parentInfo: [{
                    cityName: "全国",
                    code: 100000
                }]
            };
        },
        mounted() {
            this.getGeoJson(100000);
        },
        methods: {
            getGeoJson(adcode) {
                let that = this;
                AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
                    var districtExplorer = new DistrictExplorer();
                    districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
                        if (error) {
                            console.error(error);
                            return;
                        }
                        let Json = areaNode.getSubFeatures();
                        if (Json.length > 0) {
                            that.geoJson.features = Json;
                        } else if (Json.length === 0) {
                            that.geoJson.features = that.geoJson.features.filter(
                                item => item.properties.adcode == adcode
                            );
                            if (that.geoJson.features.length === 0) return;
                        }
                        that.getMapData();
                    });
                });
            },
            //获取数据
            getMapData() {
                let mapData = this.geoJson.features.map(item => {
                    return {
                        name: item.properties.name,
                        value: Math.random() * 1000,
                        cityCode: item.properties.adcode
                    };
                });
                mapData = mapData.sort(function (a, b) {
                    return b.value - a.value;
                });
                this.initEcharts(mapData);
            },
            initEcharts(mapData) {
                var min = mapData[mapData.length - 1].value;
                var max = mapData[0].value;
                if (mapData.length === 1) {
                    min = 0;
                }
                this.myChart = echarts.init(document.getElementById("sctterMap"));
                echarts.registerMap("Map", this.geoJson); //注册
                this.myChart.setOption({
                        tooltip: {
                            trigger: "item",
                            formatter: p => {
                                let val = p.value;
                                if (!val) {
                                    val = 0;
                                }
                                let txtCon = p.name + ":" + val.toFixed(2);
                                return txtCon;
                            }
                        },
                        title: {
                            show: true,
                            left: "center",
                            top: "15",
                            text: this.parentInfo[this.parentInfo.length - 1].cityName +
                                "地图(可点击下钻)",
                            textStyle: {
                                color: "rgb(179, 239, 255)",
                                fontSize: 16
                            }
                        },
                        toolbox: {
                            feature: {
                                restore: {
                                    show: false
                                },
                                saveAsImage: {
                                    name: this.parentInfo[this.parentInfo.length - 1].cityName + "地图"
                                },
                                dataZoom: {
                                    show: false
                                },
                                magicType: {
                                    show: false
                                }
                            },
                            iconStyle: {
                                normal: {
                                    borderColor: "#1990DA"
                                }
                            },
                            top: 15,
                            right: 35
                        },
                        visualMap: {
                            min: min,
                            max: max,
                            left: "3%",
                            bottom: "5%",
                            calculable: true,  //是否显示拖拽用的手柄
                            seriesIndex: [0],
                            inRange: {
                                color: ["#105389", "#3a8abc", "#0D96F1"]
                            },
                            textStyle: {
                                color: "#24CFF4"
                            }
                        },
                        series: [{
                            name: "地图",
                            type: "map",
                            map: "Map",
                            top: 120,
                            roam: true, //是否可缩放
                            zoom: 1.5, //缩放比例
                            data: mapData,
                            label: {
                                normal: {
                                    show: true,
                                    color: "rgb(249, 249, 249)", //省份标签字体颜色
                                    formatter: p => {
                                        switch (p.name) {
                                            case "内蒙古自治区":
                                                p.name = "内蒙古";
                                                break;
                                            case "西藏自治区":
                                                p.name = "西藏";
                                                break;
                                            case "新疆维吾尔自治区":
                                                p.name = "新疆";
                                                break;
                                            case "宁夏回族自治区":
                                                p.name = "宁夏";
                                                break;
                                            case "广西壮族自治区":
                                                p.name = "广西";
                                                break;
                                            case "香港特别行政区":
                                                p.name = "香港";
                                                break;
                                            case "澳门特别行政区":
                                                p.name = "澳门";
                                                break;
                                            default:
                                                break;
                                        }
                                        return p.name;
                                    }
                                },
                                emphasis: {
                                    show: true,
                                    color: "#f75a00"
                                }
                            },
                            itemStyle: {
                                normal: {
                                    areaColor: "#24CFF4",
                                    borderColor: "#53D9FF",
                                    borderWidth: 1.3,
                                    shadowBlur: 15,
                                    shadowColor: "rgb(58,115,192)",
                                    shadowOffsetX: 7,
                                    shadowOffsetY: 6
                                },
                                emphasis: {
                                    areaColor: "#8dd7fc",
                                    borderWidth: 1.6,
                                    shadowBlur: 25
                                }
                            }
                        }]
                    },
                    true
                );
                let that = this;
                this.myChart.off("click");
                this.myChart.on("click", params => {
                    if (
                        that.parentInfo[that.parentInfo.length - 1].code ==
                        params.data.cityCode
                    ) {
                        return;
                    }
                    let data = params.data;
                    that.parentInfo.push({
                        cityName: data.name,
                        code: data.cityCode
                    });
                    that.getGeoJson(data.cityCode);

  
                });
            },


            //选择切换市县
            chooseArea(val, index) {
                console.log("index: "+ index)
                if (this.parentInfo.length === index + 1) {
                    return
                }
                this.parentInfo.splice(index + 1)
                this.getGeoJson(this.parentInfo[this.parentInfo.length - 1].code);
                this.getTableData(this.parentInfo[this.parentInfo.length - 1].code);
            },
        }
    };
</script>
<style lang="scss" scoped>
    .echarts {
        width: 700px;
        height: 600px;
        position: relative;
        background: url("../../assets/bg1.jpg") no-repeat;
        background-size: 100% 100%;
        float: left;
    }

    #tableContent {
        float: left;
    }


    .mapChoose {
        position: absolute;
        left: 20px;
        top: 55px;
        color: #eee;


        .title {
            padding: 5px;
            border-top: 1px solid rgba(147, 235, 248, .8);
            border-bottom: 1px solid rgba(147, 235, 248, .8);
            cursor: pointer;
        }

        .icon {
            font-family: "simsun";
            font-size: 25px;
            margin: 0 11px;
        }
    }
</style>

效果如下:

Vue项目中使用echarts教程_第17张图片

点击下钻:

Vue项目中使用echarts教程_第18张图片

相关配置或资料查取

更多配置项详见

https://echarts.apache.org/zh/option.html#title

更多好看的图可见Echarts社区

https://gallery.echartsjs.com

地图选择器

http://datav.aliyun.com/tools/atlas/#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5

实时geoJson文件

https://hxkj.vip/demo/echartsMap/

你可能感兴趣的