<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() {
? ? /* 定義一個(gè)隨機(jī)函數(shù)生成數(shù)據(jù) */
? ? function randomValue() {
? ? ? /* Math.round() 四舍五入成整數(shù) */
? ? ? /* 生成0-100的隨機(jī)數(shù)整數(shù) */
? ? ? return Math.round(Math.random() * 100);
? ? }
? ? /* 定義了各個(gè)省市的數(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: "臺(tái)灣", 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對(duì)象中name屬性中定義 */
? ? ? ? ? /* params.name 數(shù)據(jù)名稱 是series對(duì)象中data數(shù)組中對(duì)象的屬性*/
? ? ? ? ? /* params.value 數(shù)據(jù)值 是series對(duì)象中data數(shù)組中對(duì)象的值*/
? ? ? ? ? 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",
? ? ? //?? ],
? ? ? // },
? ? ? /* 地圖的配置項(xiàng) */
? ? ? 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>
作者：清風(fēng)伴酒__
鏈接：http://www.itdecent.cn/p/0ccb04e907c5
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
