Vue项目中使用echarts教程
Vue项目中使用echarts教程准备工作npm 安装EChartsnpm install echarts --save引入 ECharts项目入口文件main.js中引入Echarts老版本引入方式import echarts from 'echarts';// 或者按需引入import echarts from 'echarts/lib/echarts';Vue.prototype.$echa
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文件
更多推荐
所有评论(0)