微信小程序中使用echarts

echart体验示例小程序Demo：

echarts微信小程序组件：兼容小程序 Canvas的组件ec-canvas，可以方便地使用 ECharts，载gitHub项目。

ec-canvas 目录下有一个 echarts.js，默认echarts-for-weixin 项目发版的时对应最新版的 ECharts，可以自行从官网自定义构建，并修改文件名为echarts.js，替换ec-canvas 目录下的 echarts.js，以减小文件大小。

本文示例源码

下载地址

组件的使用

1. 拷贝 ec-canvas 目录到新建的项目下，然后做相应的调整。
2. 小程序的折线图demo：

• 创建图表：在json配置如下：

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

• wxml 中，创建 组件：

• js 中初始化图表：

1）获取显示像素，避免出现echarts失真的情况。

const getDpr = () => {
    let pixelRatio = 0;
    wx.getSystemInfo({
        success: (result) => {
            pixelRatio = result.pixelRatio
        },
        fail() {
            pixelRatio = 0
        }
    })
    return pixelRatio
}
let dpr = getDpr();

2）初始化图表：

initBasicEcharts(data) {
        const that = this
        data = [{
            '2021-09-02': {
                ReportCount: 42
            },
            '2021-09-03': {
                ReportCount: 0
            },
            '2021-09-04': {
                ReportCount: 0
            },
            '2021-09-05': {
                ReportCount: 3
            },
            '2021-09-06': {
                ReportCount: 0
            },
            '2021-09-07': {
                ReportCount: 0
            },
        ]
        let presentationTopCharts = this.selectComponent('#streetlinechart')
        presentationTopCharts.init((canvas, width, height) => {
            const Chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio:dpr
            })
            Chart.setOption(that.getLineOption(data))
            return Chart
        })
},
// 
 getLineOption(data) {
 		 let xAisData = [],
                yAisDataOne = [];
            for (const key in data) {
                xAisData.push(key.slice(6))
                yAisDataOne.push(data[key].ReportCount)
            }
        let option = {
            color: ["#EC8C17"],
            tooltip:{
                show: true,
                trigger: 'axis',
                backgroundColor: 'rgba(0,0,0,0.5)',
                textStyle: { // 提示框浮层的文本样式。
                  color: '#fff',
                  fontStyle: 'normal',
                  fontWeight: 'normal',
                  fontFamily: 'sans-serif',
                  fontSize: 14,
                },
                confine: true,
                axisPointer: {
                  type: 'line',
                  axis: 'auto',
                  snap: true,
                },
            },
            grid: {
                left: "1%",
                right: "5%",
                bottom: "5%",
                top: '8%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisTick: {
                    show: false
                },
                data: xAisData,
                axisLabel: {
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false
                },
            },
            series: [{
                name: '上报',
                data: yAisDataOne,
                type: 'line',
                symbol: 'circle',
                symbolSize: 10,
                areaStyle: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: "rgba(236,140,23, 0.5)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(236,140,23, 0)", // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            }, ]
        };
        console.log(yAisDataTwo.length, yAisDataTwo);
        if (yAisDataTwo.length > 0) {
            option.color = ["#EC8C17", '#1FD3A3']
            option.grid.bottom = "15%"
            option.legend = {
                bottom: '1%',
                icon: "roundRect",
                itemHeight: 12,
                itemWidth: 12,
            };
            option.series.push({
                name: '已处理',
                data: yAisDataTwo,
                type: 'line',
                symbol: 'circle',
                symbolSize: 10,
                areaStyle: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: "rgba(30,211,162, 0.5)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(30,211,162, 0)", // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            })
        }
        console.log(option);
        return option
},


Page({
  data: {
    streetlinechartec: {
      lazyLoad: true,
    }
  }
});

3. 效果：
   
4. 横坐标需展示内容过多时，可以设置横向滚动
   设置dataZoom属性

 //2.在内部可以横向拖动
    {
        type: 'inside',// 内置于坐标系中
        start: 0,
        end: 30,
        xAxisIndex: [0]
    },

效果：

其他dataZoom设置

dataZoom: [
    //1.横向使用滚动条
    {
        type: 'slider',//有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
        show: true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
        start: 0,//数据窗口范围的起始百分比0-100
        end: 50,//数据窗口范围的结束百分比0-100
        xAxisIndex: [0],// 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
        bottom: -10 //距离底部的距离
    },
    //2.在内部可以横向拖动
    {
        type: 'inside',// 内置于坐标系中
        start: 0,
        end: 30,
        xAxisIndex: [0]
    },
    //3.纵向使用滚动条
    {
        type: 'slider',
        show: true,
        yAxisIndex: [0],//设置组件控制的y轴
        left: '93%',//距离左侧的距离 可以使百分比，也可以是像素 left: '30'（30像素）
        start: 29,
        end: 36
    },
    //4.在内部可以纵向拖动
    {
        type: 'inside',
        yAxisIndex: [0],
        start: 29,
        end: 36
    }
],

dataZoom 组件的具体使用可以参考官方文档

使用踩坑

1. echarts图表悬浮不跟随父元素及页面滑动的问题

1）使用旧的cavas即设置force-use-old-canvas=“true"即可，

< ec-canvas id=“mychart-dom-bar” canvas-id=“mychart-bar” ec=”{{ ec }}" force-use-old-canvas=“true” >< /ec-canvas>

2）config种是否设置config = {“disableScroll”:true}，需设为false。
3）page标签是否设置height：100%;或者overflow属性，如果有就去掉。
4) canvas的所有父级元素不能设置height：100%/overflow相关属性(visible除外)，以及position相关的属性(relative,static除外)。

2. echarts图表层级最高，设置遮罩层z-index:999后，开发者工具查看工具无效果

• 不用理，真机上是好的