Echarts(react)实现中国地图的引入以及使用

事实上，只需要将Echarts官网提供的series[ { mapType: ‘china’} ]就可以简单实现

import React from "react";
import EChartBase from "./EChartBase";
import echarts from 'echarts/lib/echarts';
import 'echarts/map/js/china';
import geoJson from 'echarts/map/json/china.json';class EChartMapBars extends React.Compontent {constructor(props) {super(props);this.option = {title: {text: '各省份使用情况',subtext: '数据暂虚构',left: 'center'},tooltip: {trigger: 'item'},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},visualMap: {min: 0,max: 2500,left: 'left',top: 'bottom',text: ['高', '低'],           // 文本，默认为数值文本calculable: true},legend: {orient: 'vertical',left: 'left',data: ['新增设计',//  'iphone4', 'iphone5']},series: [{name: '新增设计',type: 'map',mapType: 'china',roam: false,label: {show:true// normal: {//     show: false// },// emphasis: {//     show: true// }},data: [{ name: '北京', value: Math.round(Math.random() * 1000) },{ name: '天津', value: Math.round(Math.random() * 1000) },{ name: '上海', value: Math.round(Math.random() * 1000) },{ name: '重庆', value: Math.round(Math.random() * 1000) },{ name: '河北', value: Math.round(Math.random() * 1000) },{ name: '河南', value: Math.round(Math.random() * 1000) },{ name: '云南', value: Math.round(Math.random() * 1000) },{ name: '辽宁', value: Math.round(Math.random() * 1000) },{ name: '黑龙江', value: Math.round(Math.random() * 1000) },{ name: '湖南', value: Math.round(Math.random() * 1000) },{ name: '安徽', value: Math.round(Math.random() * 1000) },{ name: '山东', value: Math.round(Math.random() * 1000) },{ name: '新疆', value: Math.round(Math.random() * 1000) },{ name: '江苏', value: Math.round(Math.random() * 1000) },{ name: '浙江', value: Math.round(Math.random() * 1000) },{ name: '江西', value: Math.round(Math.random() * 1000) },{ name: '湖北', value: Math.round(Math.random() * 1000) },{ name: '广西', value: Math.round(Math.random() * 1000) },{ name: '甘肃', value: Math.round(Math.random() * 1000) },{ name: '山西', value: Math.round(Math.random() * 1000) },{ name: '内蒙古', value: Math.round(Math.random() * 1000) },{ name: '陕西', value: Math.round(Math.random() * 1000) },{ name: '吉林', value: Math.round(Math.random() * 1000) },{ name: '福建', value: Math.round(Math.random() * 1000) },{ name: '贵州', value: Math.round(Math.random() * 1000) },{ name: '广东', value: Math.round(Math.random() * 1000) },{ name: '青海', value: Math.round(Math.random() * 1000) },{ name: '西藏', value: Math.round(Math.random() * 1000) },{ name: '四川', value: Math.round(Math.random() * 1000) },{ name: '宁夏', value: Math.round(Math.random() * 1000) },{ name: '海南', value: Math.round(Math.random() * 1000) },{ name: '台湾', value: Math.round(Math.random() * 1000) },{ name: '香港', value: Math.round(Math.random() * 1000) },{ name: '澳门', value: Math.round(Math.random() * 1000) }]},// {//     name: 'iphone4',//     type: 'map',//     mapType: 'china',//     label: {//         normal: {//             show: false//         },//         emphasis: {//             show: true//         }//     },//     data: [//         { name: '北京', value: Math.round(Math.random() * 1000) },//         { name: '天津', value: Math.round(Math.random() * 1000) },//         { name: '上海', value: Math.round(Math.random() * 1000) },//         { name: '重庆', value: Math.round(Math.random() * 1000) },//         { name: '河北', value: Math.round(Math.random() * 1000) },//         { name: '安徽', value: Math.round(Math.random() * 1000) },//         { name: '新疆', value: Math.round(Math.random() * 1000) },//         { name: '浙江', value: Math.round(Math.random() * 1000) },//         { name: '江西', value: Math.round(Math.random() * 1000) },//         { name: '山西', value: Math.round(Math.random() * 1000) },//         { name: '内蒙古', value: Math.round(Math.random() * 1000) },//         { name: '吉林', value: Math.round(Math.random() * 1000) },//         { name: '福建', value: Math.round(Math.random() * 1000) },//         { name: '广东', value: Math.round(Math.random() * 1000) },//         { name: '西藏', value: Math.round(Math.random() * 1000) },//         { name: '四川', value: Math.round(Math.random() * 1000) },//         { name: '宁夏', value: Math.round(Math.random() * 1000) },//         { name: '香港', value: Math.round(Math.random() * 1000) },//         { name: '澳门', value: Math.round(Math.random() * 1000) }//     ]// },// {//     name: 'iphone5',//     type: 'map',//     mapType: 'china',//     label: {//         normal: {//             show: false//         },//         emphasis: {//             show: true//         }//     },//     data: [//         { name: '北京', value: Math.round(Math.random() * 1000) },//         { name: '天津', value: Math.round(Math.random() * 1000) },//         { name: '上海', value: Math.round(Math.random() * 1000) },//         { name: '广东', value: Math.round(Math.random() * 1000) },//         { name: '台湾', value: Math.round(Math.random() * 1000) },//         { name: '香港', value: Math.round(Math.random() * 1000) },//         { name: '澳门', value: Math.round(Math.random() * 1000) }//     ]// }]};};componentDidMount = () => {this.bond()// if (this.props.option) {//     this.bond(this.props.option)// }window.addEventListener('resize', () => {if (this.props && this.props.option && this.props.option.eleId) {const dom = document.getElementById(this.props.option.eleId);if (dom) {const myChart = echarts.init(dom);myChart.resize();}}})};componentDidUpdate = () => {this.bond()// if (this.props.option) {//     this.bond(this.props.option)// }};updateOption = (option) => {};bond = (option) => {// if (!option) return;const dom = document.getElementById('echartsMapId');if (!dom) return;const chart = echarts.init(dom);// this.updateOption(option);chart.setOption(this.option);};render = () => {return (<div id='echartsMapId' style={{ width: "100", height: "25rem" }} />)};}export default EChartMapBars;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！