微信小程序 echarts 画多个横向柱状图

然后是json

javascript 复制代码
{
  "usingComponents": {
    "ec-canvas": "../../common/ec-canvas/ec-canvas"
  },
  "navigationBarTitleText": "主题活动"
}

ec-canvas获取方式 在链接里下载代码 然后copy ec-canvas文件夹到自己的项目

https://gitcode.net/mirrors/ecomfe/echarts-for-weixin?utm_source=csdn_github_accelerator&from_codechina=yeshttps://gitcode.net/mirrors/ecomfe/echarts-for-weixin?utm_source=csdn_github_accelerator&from_codechina=yes

javascript 复制代码
//js里引入echarts 在page上面
import * as echarts from '../../common/ec-canvas/echarts'
Page({...})
  getStatisticThemeActivitiesTrend(){
    const that = this
    let oUserInfo = this.data.userInfo
    util.request(api.statisticThemeActivitiesTrend + oUserInfo.userId + '&startDate=' + that.data.startDate + '&endDate=' + that.data.endDate, '', 'get').then(res => {
      if (res.code == 200) {
        let odata = res.data
        this.setData({
          info: odata
        })

        if(!odata.themeList || odata.themeList.length == 0){
          util.alert("暂无数据")
          return
        }
        
        //主要代码
        odata.themeList.forEach(function (item, index) {        
          let echartsComponnet = that.selectComponent('#area-dom-'+index);
          echartsComponnet.init((canvas, width, height, dpr) => {
            // 初始化图表
            const Chart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr
            });
            Chart.setOption(that.getAreaPie(item));
            // 注意这里一定要返回 chart 实例,否则会影响事件处理等
            return Chart;
          });          
        })
      } else {
        wx.showModal({
          title: res.msg,
          icon: 'error',
          showCancel: false,
          duration: 3000
        });
      }
    });
  },

  getAreaPie(odata) {    
    let option = {
      grid: { //图表距边框的距离
        top: 0,
        right: 30,        
        bottom: 0,
        left: 0,
        containLabel: false,
      },
      xAxis: {
        type: 'value',
        "splitLine": {     //网格线
          "show": false
        }
      },
      yAxis: {
        show : false,
        type: 'category',
        data: ['','','','']
      },
      series: [
        {
          data: [
            odata.countActivityNumber, 
            odata.countPhysicalRecordNumber, 
            odata.countDetailNumber, 
            odata.countObservationNumber],
          type: 'bar',
          itemStyle: {   
            //通常情况下:
            normal:{  
              label : {
                show: true,
                position: 'right',
              },
         //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
              color: function (params){
                var colorList = ['#70b603', '#00bfbf', '#027db4', '#6300bf']
                return colorList[params.dataIndex];
              }
            },
            //鼠标悬停时:
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
          },
        }
      ]
    };
    return option
  },
相关推荐
腾马科技4 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
郑叔敲代码9 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
U.2 SSD12 小时前
Echart仪表盘示例
javascript·echarts
棋子一名12 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风13 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
明天你好26715 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
江城开朗的豌豆16 小时前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
U.2 SSD17 小时前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆17 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
Stanford_11061 天前
如何利用Python进行数据分析与可视化的具体操作指南
开发语言·c++·python·微信小程序·微信公众平台·twitter·微信开放平台