<template>
<div class="china-chart">
<div ref="ChinaChart" style="height: 500px"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import "./utils/china-1.js";
export default {
name: "ChinaChart",
mounted() {
/* 定义一个随机函数生成数据 */
function randomValue() {
/* Math.round() 四舍五入成整数 */
/* 生成0-100的随机数整数 */
return Math.round(Math.random() * 100);
}
/* 定义了各个省市的数据 */
var dataList = [
{ name: "南海诸岛", value: 0 },
{ name: "北京", value: randomValue() },
{ name: "天津", value: randomValue() },
{ name: "上海", value: randomValue() },
{ name: "重庆", value: randomValue() },
{ name: "河北", value: randomValue() },
{ name: "河南", value: randomValue() },
{ name: "云南", value: randomValue() },
{ name: "辽宁", value: randomValue() },
{ name: "黑龙江", value: randomValue() },
{ name: "湖南", value: randomValue() },
{ name: "安徽", value: randomValue() },
{ name: "山东", value: randomValue() },
{ name: "新疆", value: randomValue() },
{ name: "江苏", value: randomValue() },
{ name: "浙江", value: randomValue() },
{ name: "江西", value: randomValue() },
{ name: "湖北", value: randomValue() },
{ name: "广西", value: randomValue() },
{ name: "甘肃", value: randomValue() },
{ name: "山西", value: randomValue() },
{ name: "内蒙古", value: randomValue() },
{ name: "陕西", value: randomValue() },
{ name: "吉林", value: randomValue() },
{ name: "福建", value: randomValue() },
{ name: "贵州", value: randomValue() },
{ name: "广东", value: randomValue() },
{ name: "青海", value: randomValue() },
{ name: "西藏", value: randomValue() },
{ name: "四川", value: randomValue() },
{ name: "宁夏", value: randomValue() },
{ name: "海南", value: randomValue() },
{ name: "台湾", value: randomValue() },
{ name: "香港", value: randomValue() },
{ name: "澳门", value: randomValue() },
];
let ChinaChart = echarts.init(this.$refs.ChinaChart);
let options = {
/* 提示框组件 */
tooltip: {
formatter: function (params) {
// console.log(params)
/* params.seriesName 系列名 在series对象中name属性中定义 */
/* params.name 数据名称 是series对象中data数组中对象的属性*/
/* params.value 数据值 是series对象中data数组中对象的值*/
return (
params.seriesName + " : " + params.name + " -- " + params.value
);
},
},
visualMap: {
min: 0,
max: 100,
left: 50,
bottom: 20,
text: ["高", "低"],
inRange: {
// color: ['#e0ffff', '#006edd']
color: ["skyblue", "pink"],
},
show: true,
},
/* 地图的图例组件 */
// visualMap: {
// show: true,
// x: 10,
// y: 20,
// splitList: [
// { start: 70, end: 100 },
// { start: 60, end: 70 },
// { start: 50, end: 60 },
// { start: 40, end: 50 },
// { start: 30, end: 40 },
// { start: 20, end: 30 },
// { start: 10, end: 20 },
// { start: 0, end: 10 },
// ],
// color: [
// "#5475f5",
// "#9feaa5",
// "yellow",
// "#74e2ca",
// "#e6ac53",
// "#9fb5ea",
// "#FEF5DC",
// ],
// },
/* 地图的配置项 */
geo: {
map: "china",
/* 控制缩放和拖拽 */
roam: true,
/* 按比例放大缩小 */
zoom: 1,
/* 地图上面的文字 */
label: {
normal: {
show: true,
fontSize: "12",
color: "rgba(0,0,0,0.7)",
// offset:[0,0]
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: {
areaColor: "red",
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
/* 地图的数据 */
series: [
{
name: "hhjklnkl",
type: "map",
geoIndex: 0,
/* 把省份数据塞到data中 */
data: dataList,
},
],
};
ChinaChart.setOption(options);
window.ChinaChart = ChinaChart;
},
};
</script>
<style>
</style>
作者：清风伴酒__
链接：https://www.jianshu.com/p/0ccb04e907c5
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
