小程序：ECharts绘制中国地图、柱状图、折线图及常见问题

一、导入ECharts插件

Echarts为了兼容小程序 Canvas，提供了一个小程序的组件，可以用这种方式更方便地使用 ECharts：组件地址。

下载ECharts时可以从官网自定义构建以减小文件大小,自定义构建下载后文件名为echarts.min.js，需重命名为echarts.js 替换组件内的echarts.js文件。

导入小程序工程目录如下图：
在这里插入图片描述
2.引入地图josn文件

mapData.js放入index同级目录，中国地区JSON文件下载地址
（demo中mapData文件修正了地图中名字的位置）

二、使用地图、柱状图、折线图、

修改index.json文件如下：

"usingComponents": {
    "ec-canvas": "../../lib/ec-canvas/ec-canvas"
  }

注意路径我是放在lib文件下。

index.wxml 中，我们创建了两个个组件，一个地图和一个柱状图，内容如下：

<view class="container">
  <ec-canvas id="mychart-dom-map" canvas-id="mychart-map" ec="{{ecMap}}"></ec-canvas>
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ecBar }}"></ec-canvas>
</view>

js文件如下：

import * as echarts from '../../lib/ec-canvas/echarts';
import geoJson from "./mapData.js";

var ChartMap = null;
var mapDate = [];
var ChartBar = null;
var nameList = [];
var valueList = [];
Page({
  data: {
    ecMap: {
      onInit: initChartMap
    },
    ecBar: {
      onInit: initChartBar
    },
  },
  onLoad: function(options) {

  },
  onShow: function() {
	//模拟获取数据
    this.getMapData();
  },
  getMapData: function(e) {
    mapDate = [{
        name: '北京',
        value: randomData()
      },
      {
        name: '天津',
        value: randomData()
      },
      {
        name: '上海',
        value: randomData()
      },
      {
        name: '重庆',
        value: randomData()
      },
      {
        name: '河北',
        value: randomData()
      },
      {
        name: '河南',
        value: randomData()
      },
      {
        name: '云南',
        value: randomData()
      },
      {
        name: '辽宁',
        value: randomData()
      },
      {
        name: '黑龙江',
        value: randomData()
      },
      {
        name: '湖南',
        value: randomData()
      },
      {
        name: '安徽',
        value: randomData()
      },
      {
        name: '山东',
        value: randomData()
      },
      {
        name: '新疆',
        value: randomData()
      },
      {
        name: '江苏',
        value: randomData()
      },
      {
        name: '浙江',
        value: randomData()
      },
      {
        name: '江西',
        value: randomData()
      },
      {
        name: '湖北',
        value: randomData()
      },
      {
        name: '广西',
        value: randomData()
      },
      {
        name: '甘肃',
        value: randomData()
      },
      {
        name: '山西',
        value: randomData()
      },
      {
        name: '内蒙古',
        value: randomData()
      },
      {
        name: '陕西',
        value: randomData()
      },
      {
        name: '吉林',
        value: randomData()
      },
      {
        name: '福建',
        value: randomData()
      },
      {
        name: '贵州',
        value: randomData()
      },
      {
        name: '广东',
        value: randomData()
      },
      {
        name: '青海',
        value: randomData()
      },
      {
        name: '西藏',
        value: randomData()
      },
      {
        name: '四川',
        value: randomData()
      },
      {
        name: '宁夏',
        value: randomData()
      },
      {
        name: '海南',
        value: randomData()
      },
      {
        name: '台湾',
        value: randomData()
      },
      {
        name: '香港',
        value: randomData()
      },
      {
        name: '澳门',
        value: randomData()
      }
    ];
    var list = mapDate;
    var name = [];
    var value = [];
    for (var i = 0; i < mapDate.length; i++) {
      name[i] = mapDate[i].name;
      value[i] = mapDate[i].value;
    }
    nameList = name;
    valueList = value;

  }
})

/**
 * 生成1000以内的随机数
 */
function randomData() {
  return Math.round(Math.random() * 2000);
}

/**
 * 全国分布地图
 */
function initChartMap(canvas, width, height) {

  ChartMap = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(ChartMap);
  echarts.registerMap('china', geoJson);
  ChartMap.setOption(getMapOption());
  return ChartMap;
}

function getMapOption() {
  var option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: "#FFF",
      padding: [
        10, // 上
        15, // 右
        8, // 下
        15, // 左
      ],
      extraCssText: 'box-shadow: 2px 2px 10px rgba(21, 126, 245, 0.35);',
      textStyle: {
        fontFamily: "'Microsoft YaHei', Arial, 'Avenir', Helvetica, sans-serif",
        color: '#005dff',
        fontSize: 12,
      },
      formatter: `{b} :  {c}人`
    },
    geo: [{
      // 地理坐标系组件
      map: "china",
      roam: false, // 可以缩放和平移
      aspectScale: 0.8, // 比例
      layoutCenter: ["50%", "43%"], // position位置
      layoutSize: 340, // 地图大小，保证了不超过 370x370 的区域
      label: {
        // 图形上的文本标签
        normal: {
          show: true,
          textStyle: {
            color: "rgba(0, 0, 0, 0.9)",
            fontSize: '8'
          }
        },
        emphasis: { // 高亮时样式
          color: "#333"
        }
      },
      itemStyle: {
        // 图形上的地图区域
        normal: {
          borderColor: "rgba(0,0,0,0.2)",
          areaColor: "#005dff"
        }
      }
    }],
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: {
          readOnly: false
        },
        restore: {},
        saveAsImage: {}
      }
    },
    visualMap: {
      type: "piecewise",
      splitNumber: 5,
      pieces: [{
          min: 1000,
          label: ">1000"
        }, // 不指定 max，表示 max 为无限大（Infinity）。
        {
          min: 100,
          max: 999,
          label: "100-999"
        },
        {
          min: 10,
          max: 99,
          label: "10-99"
        },
        {
          min: 1,
          max: 9,
          label: "1-9"
        }, // 表示 value 等于 123 的情况。
        {
          value: 0,
          label: "0"
        } // 不指定 min，表示 min 为无限大（-Infinity）。
      ],
      textStyle: {
        fontSize: 10
      },
      realtime: false,
      calculable: false,
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered'],
      },
      orient: "horizontal",
      bottom:10,
      left: 50,
      itemHeight: 10,
      itemWidth: 10,
    },
    series: [{
      type: 'map',
      mapType: 'china',
      geoIndex: 0,
      roam: false, // 鼠标是否可以缩放
      label: {
        normal: {
          show: true
        },
        emphasis: {
          show: true
        }
      },
      data: mapDate
    }]
  };
  return option;
}
/**
 * 柱状图
 */
function initChartBar(canvas, width, height) {

  ChartBar = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(ChartBar);
  ChartBar.setOption(getBarOption());
  return ChartBar;
}

function getBarOption() {
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '4%',
      top:0,
      // right: '4%',
      bottom: '0',
      containLabel: true
    },
    
    xAxis: {
      type: 'value',
      splitArea: {
        show: false
      },
      name: "人",
      nameGap: 5,
      nameLocation: "end",
      min: 0,
      max: 2000,
      
    },

    yAxis: {
      type: 'category',
      data: nameList,
      silent: false,
      splitLine: {
        show: false
      },
      splitArea: {
        show: false
      }
    },
    series: [{
      type: 'bar',
      data: valueList,
      // Set `large` for large data amount
      large: true
    }]
  };
  return option;
}

修改wxss文件添加

.container {
  position: relative;
  top: 15rpx;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;

} 
#mychart-dom-map{
  position: relative;
  width: 100%;
  padding-top: 20rpx;
  height: 570rpx;
}
#mychart-dom-bar{
  position: relative;
  width: 100%;
  padding-top: 20rpx;
  height: 1400rpx;
}

运行效果如下：
中国地图：
在这里插入图片描述

柱状图：
在这里插入图片描述

折线图就不再上代码了：折线图代码见demo中dialog页面
在这里插入图片描述

三、常见问题

期间遇到的几个问题：
注：
1.ec-canvas 必须设置宽高，wxss 中样式不可缺少。

2.图层问题：canvas是原生组件，由于原生组件脱离在 WebView 渲染流程外，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上，图表会显示在最上方。

解决办法：使用cover-view ，cover-view可以覆盖在原生组件上方。在这里插入图片描述

3.自定义tooltip
可以用formatter方法改变显示的标签样式,自

tooltip: {
      trigger: 'item',
      backgroundColor: "#FFF",
      padding: [
        10, // 上
        15, // 右
        8, // 下
        15, // 左
      ],
      extraCssText: 'box-shadow: 2px 2px 10px rgba(21, 126, 245, 0.35);',
      textStyle: {
        fontFamily: "'Microsoft YaHei', Arial, 'Avenir', Helvetica, sans-serif",
        color: '#005dff',
        fontSize: 12,
      },
      formatter: `{b} :  {c}人`
    },

效果如图：
在这里插入图片描述

4.ECharts滑动超过范围消失，再次点击出现。如无需使用滑动交互功能，可注释掉ec-canvas.js里的touchMove方法

 touchMove(e) {
     
      // if (this.chart && e.touches.length > 0) {
      //   var touch = e.touches[0];
      //   this.chart._zr.handler.dispatch('mousemove', {
      //     zrX: touch.x,
      //     zrY: touch.y
      //   });
      // }
    },

** 5.ECharts图表绘制在弹框上时，可以用 catchtouchmove 方法拦截弹框下层页面滑动 **

<view class='dailog_view' wx:if="{{isShow}}" catchtouchmove='catchtouchmove'>
    <view class="mychart-view" catchtouchmove="catchtouchmove">
      <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
    </view>
</view>

	catchtouchmove: function() {
		return;
   },

6.报错：Error: Component series.line not exists. Load it first.
ECharts 折线图 4.7.0 版本自构建下载源码报错，切换成4.6.0可恢复正常。原因后续再研究。

本文demo下载地址

如有其它问题，可以留言讨论。

FORMAT-qi

原创文章 18 获赞 102 访问量 7952

关注私信