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
<template>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</template>
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项目,显示结果
完整代码
<template>
<div id="main" style="width: 500px;height:400px;"></div>
</template>
<script>
export default {
name: "HelloWord",
methods: {
drawChart() {
//2. 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('main'));
//3. 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: { //图例组件
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
//4.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
},
mounted(){
this.drawChart();
}
}
</script>
<style scoped>
</style>
快速入门绘制其他类型的图
Echarts基础概念
系列（series）
在 echarts 里，系列是指：一组数值以及他们映射成的图。
一个系列包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
echarts 里系列类型（series.type）就是图表类型。系列类型至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、map (地图) 、radar (雷达图) 、 gauge (仪表盘) 等.
如下图，右侧的 option 中声明了三个 系列：pie（饼图系列）、line（折线图系列）、bar（柱状图系列），每个系列中有他所需要的数据（series.data）。
另一种配置方式,系列的数据从dataset中取:
组件（component）
echarts 中至少有这些组件：
xAxis（直角坐标系 X 轴）
yAxis（直角坐标系 Y 轴）
grid（直角坐标系底板）
series（系列）
legend (图例组件)
title (标题组件)
dataZoom（数据区缩放组件）
visualMap（视觉映射组件）
tooltip（提示框组件）
toolbox（工具栏组件）
angleAxis（极坐标系角度轴）
radiusAxis（极坐标系半径轴）
polar（极坐标系底板）
geo（地理坐标系）等
描述图表(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组件（也就是直角坐标系的底板）设置 left、right、height、bottom 达到的效果。
中心半径定位
pie (饼图) 就可以使用中心半径定位
中心半径定位，往往依据center（中心）、radius（半径）来决定位置。
坐标系
很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）等等，需要运行在 “坐标系” 上。
我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis、yAxis、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。
如下图: 只声明了 xAxis、yAxis 和一个 scatter（散点图系列），echarts 暗自为他们创建了 grid 并关联起他们：
两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用yAxisIndex来指定它自己使用的是哪个 yAxis：
Echarts中的个性化样式
颜色主题(Theme)
Echarts4默认有两套主题hight 和 dark
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'}
]
}
效果如下:
或者也可以使用常见的对象数组的格式：效果和上图一样
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}
]
}
效果如下:
注意: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'}
}
]
};
效果如下:
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>
效果如下:
绘制中国地图(本地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>
效果如下:
实现中国地图省 市 区/县下钻与返回
我这里采用的是高德地图所提供的服务:行政区查询服务（
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>
效果如下:
点击下钻:
相关配置或资料查取
更多配置项详见
更多好看的图可见Echarts社区
地图选择器
http://datav.aliyun.com/tools/atlas/#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5
实时geoJson文件
1528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
