taro+react 使用techarts和echarts实现中国地图

第一步下载包

 cnpm i echarts techarts -D

第二步引入插件和中国地图

import EChart from 'techarts';
import * as echarts from 'echarts'
import 'echarts/map/js/china'

第三步设置option并且实例化组件

const option ={
    
    
    title : {
    
    
        text: 'iphone销量',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip : {
    
    
        trigger: 'item'
    },
    legend: {
    
    
        orient: 'vertical',
        left: 'left',
        data:['iphone']
    },
    visualMap: {
    
    
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text:['高','低'],           // 文本，默认为数值文本
        calculable : true
    },
    toolbox: {
    
    
        show: true,
        orient : 'vertical',
        left: 'right',
        top: 'center',
        feature : {
    
    
            mark : {
    
    show: true},
            dataView : {
    
    show: true, readOnly: false},
            restore : {
    
    show: true},
            saveAsImage : {
    
    show: true}
        }
    },
    series : [
        {
    
    
            name: 'iphone',
            type: 'map',
            mapType: 'china',
            roam: false,
            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: '山西',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)}
            ]
        }
    ]
};

export default class Bar extends Component {
    
    
  render() {
    
    
    return (
      <View className='bar-chart'>
        <EChart echarts={
    
    echarts} option={
    
    option} />
      </View>
    );
  }
}

最终可以展现出来

注意！！！！需要注意的就是使用echarts资源要引入！！！