import*asechartsfrom"echarts";import"./utils/china-1.js";exportdefault{name:"ChinaChart",mounted(){/* 定义一个随机函数生成数据 */functionrandomValue(){/* Math.round() 四舍五入成整数 *//* 生成0-100的随机数整数 */returnMath.round(Math.random() *100); }/* 定义了各个省市的数据 */vardataList = [ {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() }, ];letChinaChart = echarts.init(this.$refs.ChinaChart);letoptions = {/* 提示框组件 */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; },};
<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>
