echacts中國地圖

import*asechartsfrom"echarts";import"./utils/china-1.js";exportdefault{name:"ChinaChart",mounted(){/* 定義一個隨機函數(shù)生成數(shù)據(jù) */functionrandomValue(){/* Math.round() 四舍五入成整數(shù) *//* 生成0-100的隨機數(shù)整數(shù) */returnMath.round(Math.random() *100); }/* 定義了各個省市的數(shù)據(jù) */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:"內(nèi)蒙古",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 數(shù)據(jù)名稱 是series對象中data數(shù)組中對象的屬性*//* params.value 數(shù)據(jù)值 是series對象中data數(shù)組中對象的值*/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)", }, }, },/* 地圖的數(shù)據(jù) */series: [ {name:"hhjklnkl",type:"map",geoIndex:0,/* 把省份數(shù)據(jù)塞到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() {

? ? /* 定義一個隨機函數(shù)生成數(shù)據(jù) */

? ? function randomValue() {

? ? ? /* Math.round() 四舍五入成整數(shù) */

? ? ? /* 生成0-100的隨機數(shù)整數(shù) */

? ? ? return Math.round(Math.random() * 100);

? ? }

? ? /* 定義了各個省市的數(shù)據(jù) */

? ? 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: "內(nèi)蒙古", 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 數(shù)據(jù)名稱 是series對象中data數(shù)組中對象的屬性*/

? ? ? ? ? /* params.value 數(shù)據(jù)值 是series對象中data數(shù)組中對象的值*/

? ? ? ? ? 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)",

? ? ? ? ? },

? ? ? ? },

? ? ? },

? ? ? /* 地圖的數(shù)據(jù) */

? ? ? series: [

? ? ? ? {

? ? ? ? ? name: "hhjklnkl",

? ? ? ? ? type: "map",

? ? ? ? ? geoIndex: 0,

? ? ? ? ? /* 把省份數(shù)據(jù)塞到data中 */

? ? ? ? ? data: dataList,

? ? ? ? },

? ? ? ],

? ? };

? ? ChinaChart.setOption(options);


? ? window.ChinaChart = ChinaChart;

? },

};

</script>

<style>

</style>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容