echarts地图绘制

ceharts 地图绘制

效果图

js引入

// An highlighted block
  <script src="./echarts.js"></script>
  <script src="./sichuan.js"></script> //四川地图文件

html写法

// An highlighted block
  <div style="width:100%;height:82%;" id="map">
  </div>

地图配置

var optoens = { 
        backgroundColor: 'transparent', // echarts 背景色
        visualMap: {
          type: 'continuous',
          min: 0,
          max: 200,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          show: false,
        },
        dataRange: {
            min: 0,
            max: 1000,
            color: ['orange', '#4687FF'],
                     //color: ['orange', 'blue'],
            boder: 3,
            text: ['高', '低'],           // 文本，默认为数值文本
            calculable: true
          },
        series: [
          {
            name: '四川省',
            type: 'map',
            mapType: '四川',
            selectedMode: 'single',
            zoom: 1.2, //地图大小
            label: {
                position:'center',
              normal: { 
                color:'#ffffff',
                position:'top',
                borderColor: 'rgb(0, 246, 255)',
                show: true,
                formatter:'{b}\n{c}',  //渲染标签
                areaColor: '#ffffff', 
                textStyle:{
                    lineHeight: 20,
                    fontSize:12,//字体大小
                  color:'#ffffff',//标签颜色
                  position:'top',
                }
              },
              emphasis: {
                show: true,
                color: '#fff',
              },
            },
            itemStyle: {
              normal: {
                borderColor: '#94c5ea',
                areaColor: '#fdfdfd',
                borderWidth:0.2,
                color: '#888888',
              }, //正常样式
              emphasis: {
                areaColor: '#5c99ca',
                borderColor: 'rde',
                fontColor: '#fff',
              }, //鼠标事件区块样式
            },
            data:ui.lyzyfb   //这里是ajax请求的数据

          },
        ],
          
        };