Echarts和vue画个中国地图
作者：互联网
<template>
<div class="map">
<p>各经销商所在地获客量</p>
<div class="hr"></div>
<div class="chinaIcon">
<div ref="myChartChina" style="height: 100%; width: 100%"></div>
</div>
<!-- <img src="../../assets/img/expect.png" alt=""> -->
</div>
</template>
<script lang='ts'>
import { Component, Vue, Watch } from 'vue-property-decorator';
import 'echarts/map/js/china.js';
@Component({
components: {}
})
export default class GetMap extends Vue {
private chinaEchart: any = null;
public $echarts: any;
private mounted() {
// console.log(this.geoCoordMap);
setTimeout(() => {
this.winGuestMapInit();
}, 0);
}
public winGuestMapInit() {
this.chinaEchart = this.$echarts.init(this.$refs.myChartChina);
this.chinaMap();
}
public geoCoordMap: any = {
北京: [116.395645, 39.929986],
天津: [117.210813, 39.14393],
上海: [121.487899, 31.249162],
重庆: [106.530635, 29.544606],
香港: [114.186124, 22.293586],
澳门: [113.557519, 22.204118],
台湾: [120.961454, 23.80406],
// 湖北省
武汉: [114.3162, 30.581084],
黄石: [115.050683, 30.216127],
十堰: [110.801229, 32.636994],
襄阳: [112.176326, 32.094934],
宜昌: [111.310981, 30.732758],
荆州: [112.241866, 30.332591],
荆门: [112.21733, 31.042611],
鄂州: [114.895594, 30.384439],
孝感: [113.935734, 30.927955],
黄冈: [114.906618, 30.446109],
咸宁: [114.300061, 29.880657],
随州: [113.379358, 31.717858],
恩施: [109.517433, 30.308978],
仙桃: [113.443107, 30.327249],
天门: [113.16802, 30.663312],
潜江: [112.900485, 30.40138],
神农架: [110.487231, 31.595768],
//新疆维吾尔自治区
克拉玛依: [84.88118, 45.594331],
乌鲁木齐: [87.564988, 43.84038],
巴音郭楞: [86.121688, 41.771362],
伊犁: [81.297854, 43.922248],
吐鲁番: [89.181595, 42.96047],
阿勒泰: [88.137915, 47.839744],
哈密: [93.528355, 42.858596],
博尔塔拉: [82.052436, 44.913651],
阿克苏: [80.269846, 41.171731],
克孜勒苏: [76.137564, 39.750346],
昌吉: [87.296038, 44.007058],
喀什: [75.992973, 39.470627],
和田: [79.930239, 37.116774],
塔城: [82.974881, 46.758684],
新疆: [85.564988, 40.84038],
//广西壮族自治区
崇左: [107.357322, 22.415455],
柳州: [109.422402, 24.329053],
百色: [106.631821, 23.901512],
南宁: [108.297234, 22.806493],
梧州: [111.305472, 23.485395],
北海: [109.122628, 21.472718],
桂林: [110.26092, 25.262901],
河池: [108.069948, 24.699521],
贵港: [109.613708, 23.103373],
钦州: [108.638798, 21.97335],
来宾: [109.231817, 23.741166],
防城港: [108.351791, 21.617398],
贺州: [111.552594, 24.411054],
玉林: [110.151676, 22.643974],
// 西藏自治区
山南: [91.750644, 29.229027],
那曲: [92.067018, 31.48068],
阿里: [81.107669, 30.404557],
拉萨: [91.111891, 29.662557],
昌都: [97.185582, 31.140576],
林芝: [94.349985, 29.666941],
日喀则: [88.891486, 29.269023],
//宁夏回族自治区
银川: [106.206479, 38.502621],
吴忠: [106.208254, 37.993561],
中卫: [105.196754, 37.521124],
石嘴山: [106.379337, 39.020223],
固原: [106.285268, 36.021523],
// 内蒙古自治区
乌海: [106.831999, 39.683177],
鄂尔多斯市: [109.993706, 39.81649],
兴安盟: [122.048167, 46.083757],
锡林郭勒盟: [116.02734, 43.939705],
巴彦淖尔: [107.423807, 40.76918],
赤峰: [118.930761, 42.297112],
乌兰察布: [113.112846, 41.022363],
呼伦贝尔: [119.760822, 49.201636],
通辽: [122.260363, 43.633756],
阿拉善盟: [105.695683, 38.843075],
包头: [109.846239, 40.647119],
呼和浩特: [111.660351, 40.828319],
//四川省
遂宁: [105.564888, 30.557491],
雅安: [103.009356, 29.999716],
巴中: [106.757916, 31.869189],
攀枝花: [101.722423, 26.587571],
自贡: [104.776071, 29.359157],
凉山: [102.259591, 27.892393],
广元: [105.819687, 32.44104],
广安: [106.63572, 30.463984],
宜宾: [104.633019, 28.769675],
达州: [107.494973, 31.214199],
南充: [106.105554, 30.800965],
成都: [104.067923, 30.679943],
内江: [105.073056, 29.599462],
资阳: [104.633019, 28.769675],
阿坝: [102.228565, 31.905763],
甘孜: [101.969232, 30.055144],
绵阳: [104.705519, 31.504701],
乐山: [103.760824, 29.600958],
泸州: [105.44397, 28.89593],
德阳: [104.402398, 31.13114],
眉山: [103.84143, 30.061115],
//陕西省
安康: [109.038045, 32.70437],
咸阳: [108.707509, 34.345373],
渭南: [109.483933, 34.502358],
汉中: [107.045478, 33.081569],
延安: [109.50051, 36.60332],
榆林: [109.745926, 38.279439],
西安: [108.953098, 34.2778],
铜川: [108.968067, 34.908368],
宝鸡: [107.170645, 34.364081],
商洛: [109.934208, 33.873907],
// 河南省
焦作: [113.211836, 35.234608],
南阳: [112.542842, 33.01142],
三门峡: [111.181262, 34.78332],
平顶山: [113.300849, 33.745301],
驻马店: [114.049154, 32.983158],
新乡: [113.91269, 35.307258],
许昌: [113.835312, 34.02674],
洛阳: [112.447525, 34.657368],
开封: [114.351642, 34.801854],
安阳: [114.351807, 36.110267],
周口: [114.654102, 33.623741],
信阳: [114.085491, 32.128582],
郑州: [113.649644, 34.75661],
濮阳: [115.026627, 35.753298],
商丘: [115.641886, 34.438589],
漯河: [114.046061, 33.576279],
鹤壁: [114.29777, 35.755426],
//浙江省
丽水: [119.929576, 28.4563],
衢州: [118.875842, 28.95691],
台州: [121.440613, 28.668283],
宁波: [121.579006, 29.885259],
杭州: [120.219375, 30.259244],
金华: [119.652576, 29.102899],
温州: [120.690635, 28.002838],
绍兴: [120.592467, 30.002365],
嘉兴: [120.760428, 30.773992],
湖州: [120.137243, 30.877925],
舟山: [122.169872, 30.03601],
// 海南省
海口: [110.330802, 20.022071],
三亚: [109.522771, 18.257776],
海南: [109.9267865, 19.1399235],
// 山西省
运城: [111.006854, 35.038859],
忻州: [112.727939, 38.461031],
晋城: [112.867333, 35.499834],
临汾: [111.538788, 36.099745],
阳泉: [113.569238, 37.869529],
长治: [113.120292, 36.201664],
吕梁: [111.143157, 37.527316],
太原: [112.550864, 37.890277],
大同: [113.290509, 40.113744],
朔州: [112.479928, 39.337672],
晋中: [112.738514, 37.693362],
// 广东省
韶关: [113.594461, 24.80296],
惠州: [114.410658, 23.11354],
揭阳: [116.379501, 23.547999],
云浮: [112.050946, 22.937976],
深圳: [114.025974, 22.546054],
潮州: [116.630076, 23.661812],
清远: [113.040773, 23.698469],
梅州: [116.126403, 24.304571],
广州: [113.30765, 23.120049],
东莞: [113.763434, 23.043024],
江门: [113.078125, 22.575117],
肇庆: [112.479653, 23.078663],
茂名: [110.931245, 21.668226],
阳江: [111.97701, 21.871517],
汕尾: [115.372924, 22.778731],
河源: [114.713721, 23.757251],
中山: [113.42206, 22.545178],
佛山: [113.134026, 23.035095],
汕头: [116.72865, 23.383908],
湛江: [110.365067, 21.257463],
珠海: [113.562447, 22.256915],
// 云南省
怒江: [98.859932, 25.860677],
迪庆: [99.713682, 27.831029],
昭通: [103.725021, 27.340633],
西双版纳: [100.803038, 22.009433],
玉溪: [102.545068, 24.370447],
临沧: [100.092613, 23.887806],
大理: [100.223675, 25.5969],
丽江: [100.229628, 26.875351],
楚雄: [101.529382, 25.066356],
红河: [103.384065, 23.367718],
文山: [104.089112, 23.401781],
昆明: [102.714601, 25.049153],
曲靖: [103.782539, 25.520758],
保山: [99.177996, 25.120489],
思茅: [100.980058, 22.788778],
德宏: [98.589434, 24.44124],
// 贵州省
贵阳: [106.709177, 26.629907],
黔西南: [104.900558, 25.095148],
铜仁: [109.196161, 27.726271],
黔东南: [107.985353, 26.583992],
遵义: [106.93126, 27.699961],
毕节: [105.300492, 27.302612],
黔南: [107.523205, 26.264536],
六盘水: [104.852087, 26.591866],
安顺: [105.92827, 26.228595],
// 辽宁省
鞍山: [123.007763, 41.118744],
本溪: [123.778062, 41.325838],
营口: [122.233391, 40.668651],
大连: [121.593478, 38.94871],
铁岭: [123.85485, 42.299757],
朝阳: [120.446163, 41.571828],
抚顺: [123.92982, 41.877304],
盘锦: [122.073228, 41.141248],
丹东: [124.338543, 40.129023],
葫芦岛: [120.860758, 40.74303],
锦州: [121.147749, 41.130879],
沈阳: [123.432791, 41.808645],
辽阳: [123.172451, 41.273339],
阜新: [121.660822, 42.01925],
// 河北省
廊坊: [116.703602, 39.518611],
衡水: [115.686229, 37.746929],
秦皇岛: [119.604368, 39.945462],
承德: [117.933822, 40.992521],
沧州: [116.863806, 38.297615],
张家口: [114.893782, 40.811188],
石家庄: [114.522082, 38.048958],
保定: [115.49481, 38.886565],
唐山: [118.183451, 39.650531],
邢台: [114.520487, 37.069531],
邯郸: [114.482694, 36.609308],
// 青海省
// 海南: [100.624066, 36.284364],
海西: [97.342625, 37.373799],
海东: [102.085207, 36.51761],
果洛: [100.223723, 34.480485],
西宁: [101.767921, 36.640739],
海北: [100.879802, 36.960654],
黄南: [102.0076, 35.522852],
玉树: [97.013316, 33.00624],
// 湖南省
邵阳: [111.461525, 27.236811],
张家界: [110.48162, 29.124889],
益阳: [112.366547, 28.588088],
怀化: [109.986959, 27.557483],
湘西: [109.745746, 28.317951],
郴州: [113.037704, 25.782264],
衡阳: [112.583819, 26.898164],
永州: [111.614648, 26.435972],
株洲: [113.131695, 27.827433],
岳阳: [113.146196, 29.378007],
长沙: [112.979353, 28.213478],
湘潭: [112.935556, 27.835095],
常德: [111.653718, 29.012149],
娄底: [111.996396, 27.741073],
// 江苏省
镇江: [119.455835, 32.204409],
常州: [119.981861, 31.771397],
南通: [120.873801, 32.014665],
泰州: [119.919606, 32.476053],
南京: [118.778074, 32.057236],
苏州: [120.619907, 31.317987],
盐城: [120.148872, 33.379862],
宿迁: [118.296893, 33.95205],
无锡: [120.305456, 31.570037],
连云港: [119.173872, 34.601549],
徐州: [117.188107, 34.271553],
淮安: [119.030186, 33.606513],
扬州: [119.427778, 32.408505],
// 山东省
潍坊: [119.142634, 36.716115],
日照: [119.50718, 35.420225],
济宁: [116.600798, 35.402122],
聊城: [115.986869, 36.455829],
德州: [116.328161, 37.460826],
临沂: [118.340768, 35.072409],
枣庄: [117.279305, 34.807883],
莱芜: [117.684667, 36.233654],
烟台: [121.309555, 37.536562],
淄博: [118.059134, 36.804685],
滨州: [117.968292, 37.405314],
泰安: [117.089415, 36.188078],
荷泽: [115.46336, 35.26244],
济南: [117.024967, 36.682785],
威海: [122.093958, 37.528787],
青岛: [120.384428, 36.105215],
东营: [118.583926, 37.487121],
// 安徽省
宣城: [118.752096, 30.951642],
阜阳: [115.820932, 32.901211],
亳州: [115.787928, 33.871211],
蚌埠: [117.35708, 32.929499],
黄山: [118.29357, 29.734435],
六安: [116.505253, 31.755558],
池州: [117.494477, 30.660019],
滁州: [118.32457, 32.317351],
淮南: [117.018639, 32.642812],
铜陵: [117.819429, 30.94093],
合肥: [117.282699, 31.866942],
芜湖: [118.384108, 31.36602],
马鞍山: [118.515882, 31.688528],
安庆: [117.058739, 30.537898],
淮北: [116.791447, 33.960023],
宿州: [116.988692, 33.636772],
巢湖: [117.88049, 31.608733],
//黑龙江省
双鸭山: [131.171402, 46.655102],
绥化: [126.989095, 46.646064],
大兴安岭: [124.196104, 51.991789],
佳木斯: [130.284735, 46.81378],
黑河: [127.50083, 50.25069],
哈尔滨: [126.657717, 45.773225],
大庆: [125.02184, 46.596709],
七台河: [131.019048, 45.775005],
伊春: [128.910766, 47.734685],
牡丹江: [129.608035, 44.588521],
鸡西: [130.941767, 45.32154 | 13],
齐齐哈尔: [123.987289, 47.3477],
鹤岗: [130.292472, 47.338666],
// 福建省
三明: [117.642194, 26.270835],
厦门: [118.103886, 24.489231],
龙岩: [117.017997, 25.078685],
莆田: [119.077731, 25.44845],
南平: [118.181883, 26.643626],
宁德: [119.542082, 26.656527],
泉州: [118.600362, 24.901652],
漳州: [117.676205, 24.517065],
福州: [119.330221, 26.047125],
// 甘肃省
定西: [104.626638, 35.586056],
嘉峪关: [98.281635, 39.802397],
庆阳: [107.644227, 35.726801],
酒泉: [98.508415, 39.741474],
临夏: [103.215249, 35.598514],
金昌: [102.208126, 38.516072],
张掖: [100.459892, 38.93932],
白银: [104.171241, 36.546682],
陇南: [104.934573, 33.39448],
天水: [105.736932, 34.584319],
兰州: [103.823305, 36.064226],
武威: [102.640147, 37.933172],
平凉: [106.688911, 35.55011],
甘南: [102.917442, 34.992211],
// 吉林省
长春: [125.313642, 43.898338],
通化: [125.94265, 41.736397],
吉林: [126.564544, 43.871988],
白山: [126.435798, 41.945859],
松原: [124.832995, 45.136049],
延边: [129.485902, 42.896414],
辽源: [125.133686, 42.923303],
白城: [122.840777, 45.621086],
四平: [124.391382, 43.175525],
// 江西省
抚州: [116.360919, 27.954545],
九江: [115.999848, 29.71964],
宜春: [114.400039, 27.81113],
上饶: [117.955464, 28.457623],
赣州: [114.935909, 25.845296],
南昌: [115.893528, 28.689578],
吉安: [114.992039, 27.113848],
景德镇: [117.186523, 29.303563],
萍乡: [113.859917, 27.639544],
新余: [114.947117, 27.822322],
鹰潭: [117.03545, 28.24131]
};
public data: any = [
{
name: '北京',
value: 900
},
{
name: '天津',
value: 90
},
{
name: '合肥',
value: 100
},
{
name: '上海',
value: 990
},
{
name: '武汉',
value: 329
}
];
public convertData(data: any) {
let res: any = [];
for (let i = 0; i < data.length; i++) {
// console.log(data[i].name);
this.$nextTick(() => {
let geoCoord = this.geoCoordMap[data[i].name];
// console.log(geoCoord);
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
});
}
// console.log(res);
return res;
}
convertedData: any = [
this.convertData(this.data),
this.convertData(
this.data
.sort(function(a: any, b: any) {
return b.value - a.value;
})
.slice(0, 6)
)
];
public chinaMap() {
this.chinaEchart.clear();
let option: any = {
baseOption: {
xAxis: {
show: false
},
yAxis: {
show: false
},
visualMap: {
show: true,
type: 'continuous',
max: 300,
min: 0,
top: 'center',
right: '5%',
align: 'left',
calculable: true,
itemWidth: 40,
itemHeight: 304,
inRange: {
color: ['#00ECFF', '#FCCE00', '#E63504'],
},
textStyle: {
color: '#FFF',
fontSize: 28
}
},
geo: {
map: 'china',
itemStyle: {
areaColor: '#12B5C0',
borderColor: '#000'
},
emphasis: {
itemStyle: {
areaColor: 'green',
},
label: {
show: true,
fontSize: 28,
color: '#FFF'
}
}
},
series: [
{
name: '热图',
type: 'heatmap',
coordinateSystem: 'geo',
data: this.convertedData[0]
},
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertedData[0],
symbolSize: function(val: any) {
return 20 + Math.log2(val[2]);
},
label: {
show: true,
normal: {
formatter: '{b}',
position: 'right',
show: true,
textStyle: {
fontSize: 28
}
},
emphasis: {
show: true,
textStyle: {
fontSize: 28,
color: '#FFF'
}
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
},
tooltip: {
trigger: 'item',
formatter: function(params: any) {
return params.name + ' : ' + params.value[2];
}
}
}
]
}
// options: []
};
this.chinaEchart.setOption(option);
}
}
</script>
<style lang="scss">
.map {
width: 100%;
height: 100%;
position: relative;
top: 0;
p {
height: 50px;
font-size: 36px;
line-height: 50px;
position: absolute;
top: 30px;
left: 40px;
}
.hr {
position: absolute;
top: 100px;
width: 100%;
height: 2px;
background: #002f3b;
}
.chinaIcon {
width: 100%;
height: 660px;
position: absolute;
// left: 172px;
bottom: 0;
// border: 1px solid #fff;
}
// img{
// width: 100%;
// height: 100%;
// position: absolute;
// display: block;
// top: 0;left: 0;bottom: 0;right: 0;
// margin: auto;
// }
}
</style>
效果如图所示；
下面是我参考的别人的配置：
visualMap=[ //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。
// colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。
{
show:true, //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
type: 'continuous', // 定义为连续型 viusalMap
min:10, //指定 visualMapContinuous 组件的允许的最小值
max:100, //指定 visualMapContinuous 组件的允许的最大值
range:[15, 40], //指定手柄对应数值的位置。range 应在 min max 范围内
calculable:true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
realtime:true, //拖拽时，是否实时更新
inverse:false, //是否反转 visualMap 组件
precision:0, //数据展示的小数精度，默认为0，无小数点
itemWidth:20, //图形的宽度，即长条的宽度。
itemHeight:140, //图形的高度，即长条的高度。
align:"auto", //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
text:['High', 'Low'], //两端的文本
textGap:10, //两端文字主体之间的距离，单位为px
dimension:2, //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
seriesIndex:1, //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
hoverLink:true, //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
inRange:{ //定义 在选中范围中 的视觉元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange:{ //定义 在选中范围外 的视觉元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
orient:"vertical", //图例排列方向
padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]
backgroundColor:"transparent", //标题背景色
borderColor:"#ccc", //边框颜色
borderWidth:0, //边框线宽
textStyle:mytextStyle, //文本样式
formatter: function (value) { //标签的格式化工具。
return 'aaaa' + value; // 范围标签显示内容。
}
},
{
show:true, //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
type: 'piecewise', // 定义为分段型 visualMap
splitNumber:5, //对于连续型数据，自动平均切分成几段。默认为5段
pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
{min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 到 200（自定义label）'},
{value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
{max: 5} // 不指定 min，表示 min 为无限大（-Infinity）。
],
categories:['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'], //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集
min:10, //指定 visualMapContinuous 组件的允许的最小值
max:100, //指定 visualMapContinuous 组件的允许的最大值
minOpen:true, //界面上会额外多出一个『< min』的选块
maxOpen:true, //界面上会额外多出一个『> max』的选块。
selectedMode:"multiple", //选择模式，可以是：'multiple'（多选）。'single'（单选）。
inverse:false, //是否反转 visualMap 组件
precision:0, //数据展示的小数精度，默认为0，无小数点
itemWidth:20, //图形的宽度，即长条的宽度。
itemHeight:140, //图形的高度，即长条的高度。
align:"auto", //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
text:['High', 'Low'], //两端的文本
textGap:10, //两端文字主体之间的距离，单位为px
showLabel:true, //是否显示每项的文本标签
itemGap:10, //每两个图元之间的间隔距离，单位为px
itemSymbol:"roundRect", //默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
dimension:2, //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
seriesIndex:1, //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
hoverLink:true, //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
inRange:{ //定义 在选中范围中 的视觉元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange:{ //定义 在选中范围外 的视觉元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
orient:"vertical", //图例排列方向
padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]
backgroundColor:"transparent", //标题背景色
borderColor:"#ccc", //边框颜色
borderWidth:0, //边框线宽
textStyle:mytextStyle, //文本样式
formatter: function (value) { //标签的格式化工具。
return 'aaaa' + value; // 范围标签显示内容。
}
}
];
具体查看echarts官网:
https://echarts.apache.org/zh/option.html#visualMap
visualMap=[ //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。 // colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。 { show:true, //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在 type: 'continuous', // 定义为连续型 viusalMap min:10, //指定 visualMapContinuous 组件的允许的最小值 max:100, //指定 visualMapContinuous 组件的允许的最大值 range:[15, 40], //指定手柄对应数值的位置。range 应在 min max 范围内 calculable:true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围） realtime:true, //拖拽时，是否实时更新 inverse:false, //是否反转 visualMap 组件 precision:0, //数据展示的小数精度，默认为0，无小数点 itemWidth:20, //图形的宽度，即长条的宽度。 itemHeight:140, //图形的高度，即长条的高度。 align:"auto", //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。 text:['High', 'Low'], //两端的文本 textGap:10, //两端文字主体之间的距离，单位为px dimension:2, //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度 seriesIndex:1, //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列 hoverLink:true, //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮 inRange:{ //定义 在选中范围中 的视觉元素 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], symbolSize: [30, 100] }, outOfRange:{ //定义 在选中范围外 的视觉元素。 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], symbolSize: [30, 100] }, zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖 left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%' top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' right:"auto", //组件离容器右侧的距离,'20%' bottom:"auto", //组件离容器下侧的距离,'20%' orient:"vertical", //图例排列方向 padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10] backgroundColor:"transparent", //标题背景色 borderColor:"#ccc", //边框颜色 borderWidth:0, //边框线宽 textStyle:mytextStyle, //文本样式 formatter: function (value) { //标签的格式化工具。 return 'aaaa' + value; // 范围标签显示内容。 } }, { show:true, //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在 type: 'piecewise', // 定义为分段型 visualMap splitNumber:5, //对于连续型数据，自动平均切分成几段。默认为5段 pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式 {min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。 {min: 900, max: 1500}, {min: 310, max: 1000}, {min: 200, max: 300}, {min: 10, max: 200, label: '10 到 200（自定义label）'}, {value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。 {max: 5} // 不指定 min，表示 min 为无限大（-Infinity）。 ], categories:['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'], //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集 min:10, //指定 visualMapContinuous 组件的允许的最小值 max:100, //指定 visualMapContinuous 组件的允许的最大值 minOpen:true, //界面上会额外多出一个『< min』的选块 maxOpen:true, //界面上会额外多出一个『> max』的选块。 selectedMode:"multiple", //选择模式，可以是：'multiple'（多选）。'single'（单选）。 inverse:false, //是否反转 visualMap 组件 precision:0, //数据展示的小数精度，默认为0，无小数点 itemWidth:20, //图形的宽度，即长条的宽度。 itemHeight:140, //图形的高度，即长条的高度。 align:"auto", //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。 text:['High', 'Low'], //两端的文本 textGap:10, //两端文字主体之间的距离，单位为px showLabel:true, //是否显示每项的文本标签 itemGap:10, //每两个图元之间的间隔距离，单位为px itemSymbol:"roundRect", //默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' dimension:2, //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度 seriesIndex:1, //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列 hoverLink:true, //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮 inRange:{ //定义 在选中范围中 的视觉元素 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], symbolSize: [30, 100] }, outOfRange:{ //定义 在选中范围外 的视觉元素。 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], symbolSize: [30, 100] }, zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖 left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%' top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' right:"auto", //组件离容器右侧的距离,'20%' bottom:"auto", //组件离容器下侧的距离,'20%' orient:"vertical", //图例排列方向 padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10] backgroundColor:"transparent", //标题背景色 borderColor:"#ccc", //边框颜色 borderWidth:0, //边框线宽 textStyle:mytextStyle, //文本样式 formatter: function (value) { //标签的格式化工具。 return 'aaaa' + value; // 范围标签显示内容。 } }];
标签：10,vue,true,label,max,组件,画个,data,Echarts 来源： https://www.cnblogs.com/wuziqiang/p/12965537.html