devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序中使用echart、动态加载几条折线_微信小程序动态echarts

作者：盐析白兔 | 2024-03-07 05:17:56

赞

踩

微信小程序动态echarts

一、示例

 echart小程序示例

gitub地址：GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

在小程序中放入

效果

 

二、 小程序代码

json 组件的位置取决于一示例中的的echart的位置

  1. {  
  2.   "navigationStyle":"custom",
  3.   "usingComponents": {
  4.     "ec-canvas":"../../ec-canvas/ec-canvas"
  5.   }
  6. }

wxml

  1. <coverheader headerOpt="{{headerOpt}}"></coverheader>
  2. <wxs src="./../../filter/urlFilter.wxs" module="filter" /> 
  3. <view class="tendency">
  4. <view class="chartScreen">
  5.   <view class="chart_item" wx:for="{{tendencyList}}" wx:key="index">
  6.     <view class="check {{!filter.includesArr(chooseId,item.value)?'checked'+index:''}}" bindtap="clickcheck" data-item="{{item}}"></view>
  7.     <view>{{item.label}}</view>
  8.   </view>
  9. </view>
  10. <view class="echart_line">
  11.   <view class="echart_line1">
  12.     <ec-canvas id="mychart" canvas-id="mychart" ec="{{ ec }}"></ec-canvas>
  13.   </view>         
  14. </view>
  15. </view>

js

  1. var request = require('../../utils/request.js');
  2. let util=require('../../utils/util')
  3. import {getTopicAnalysis } from "../../utils/api/test/test";
  4. import * as echarts from '../../ec-canvas/echarts';
  5. Page({
  6.  
  7.   /**
  8.    * 页面的初始数据
  9.    */
  10.   data: {
  11.     headerOpt:{
  12.       showGoHome:false,
  13.       title:"详情页",
  14.       // styles:'background-image:url(https://assets-dajieimg.oss-cn-beijing.aliyuncs.com/meishu/login/bg_top.png);background-size:100% 100%'
  15.     },
  16.     navigationBarAndStatusBarHeight:wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight') + 'px',
  17.     tendencyList:[{label:'1',value:1},{label:'2',value:2},{label:'3',value:3},{label:'4',value:4},{label:'5',value:5},{label:'6',value:6,}],
  18.     chooseList:[],//选中的list
  19.     chooseId:[],//选中的id
  20.     ec: {
  21.       lazyLoad: true // 延迟加载
  22.     },
  23.     Chart:null,
  24.   },
  25.   clickcheck(e){
  26.     let that=this
  27.     let items=e.currentTarget.dataset.item
  28.     let id=e.currentTarget.dataset.item.value
  29.     let chooseId=that.data.chooseId
  30.     let chooseList=that.data.chooseList
  31.     console.log(id);
  32.     // 如果id不存在加入
  33.     if(!chooseId.includes(id)){
  34.       chooseId.push(id)
  35.       chooseList.push(items)
  36.     }else{
  37.       //删除id
  38.       var index = chooseId.findIndex(item => {return item === id})
  39.       chooseId.splice(index,1)
  40.       chooseList.splice(index,1)
  41.     }
  42.     console.log(chooseId);
  43.     that.setData({
  44.       chooseId,
  45.       chooseList,
  46.     })
  47.     that.getseriesInfo()
  48.   },
  49.   getseriesInfo(){
  50.     let colorArr= ['#556FFD', '#57BE6A', '#DF699B', '#98A1D0', '#EED46C','#D64052','#E3C24B']
  51.     //传递的参数--
  52.     getTopicAnalysis({chooseId:this.data.chooseId}).then((res)=>{
  53.         if(res.data){
  54.           let xAxisinfo = [];
  55.           let legendInfo = [];
  56.           let seriesInfo = [];
  57.           res.data.forEach((ele,index) => {
  58.               let params = {
  59.                   data: [],
  60.                   type: 'line',
  61.                   showSymbol: false,
  62.                   name: '',
  63.                   lineStyle:{
  64.                     color:colorArr[index]
  65.                   },
  66.               };
  67.               legendInfo.push(ele.topicName)//topicId 话题id
  68.               params.name = ele.topicName;
  69.                ele.dailyData.forEach((eleData) => {
  70.                       if(index == 0){
  71.                           xAxisinfo.push(eleData.date)
  72.                       }
  73.                       params.data.push(eleData.cnt)
  74.                   });
  75.                   seriesInfo.push(params);
  76.              })
  77.               this.setData({
  78.                 xAxisinfo,
  79.                 legendInfo,
  80.                 seriesInfo
  81.               })
  82.               console.log(seriesInfo);
  83.           if (!this.data.Chart){
  84.             this.init_echarts(); //初始化图表
  85.           }else{
  86.             this.setOption(); //更新数据
  87.           }
  88.           console.log(seriesInfo);
  89.         }
  90.     })
  91.   },
  92.    //综合数据图标初始化
  93.  init_echarts: function () {
  94.   this.echartsComponnet.init((canvas, width, height,dpr) => {
  95.     // 初始化图表
  96.     const Chart = echarts.init(canvas, null, {
  97.      // renderer: 'svg',
  98.       width: width,
  99.       height: height,
  100.       devicePixelRatio: dpr // new
  101.     });
  102.     Chart.setOption(this.setOption());
  103.     // 注意这里一定要返回 chart 实例，否则会影响事件处理等
  104.     return Chart;
  105.   });
  106. },
  107. //综合数据直线设置数据
  108. setOption(){
  109.   return {
  110.   //  color: ['#DC2FDC', '#1B89FF', '#87EEFB', '#EEAD6C', '#EED46C'],
  111.    tooltip: {
  112.         trigger: 'axis',
  113.       confine: true,
  114.       // showContent: false,
  115.       backgroundColor: 'rgba(255,255,255,0.5)',
  116.       borderWidth: 1,
  117.       borderColor: '#e2e6f5',
  118.       borderRadius: 4,
  119.       padding: [10, 20, 10, 20],
  120.       textStyle: {
  121.           color: "#949AB7",
  122.       },
  123.       axisPointer: {
  124.           type: "cross",
  125.           label: {
  126.             show:false,
  127.           // backgroundColor: 'rgba(39, 100, 131, 0.71)',
  128.           // backgroundColor: 'null',
  129.           },
  130.           lineStyle:{
  131.           backgroundColor: 'rgba(39, 100, 131, 0.71)',
  132.           }
  133.       },
  134.     formatter: function (params) {
  135.         let str = params[0].name+'\n'
  136.         let newParams = [];
  137.         let tooltipString = [];
  138.         newParams = [...params];
  139.         newParams.sort((a,b) => {return Number(b.value) - Number(a.value)});
  140.         newParams.forEach((ele,index) => {
  141.                 str +=ele.seriesName+ele.value+'\n'
  142.         })
  143.         return  str
  144.     }
  145. },
  146.     grid: {
  147.       left: 20,
  148.       right: 20,
  149.       bottom: 15,
  150.       top: 40,
  151.       containLabel: true
  152.     },
  153.     legend: {
  154.      icon:'circle', 
  155.      show:false,
  156.      itemHeight: 12,
  157.      itemWidth: 12,
  158.      top:'bottom',
  159.      textStyle: { 
  160.      //图例文字的样式
  161.          color: '#3F96D5',
  162.          fontSize: 12
  163.      },
  164.      data: this.data.legendInfo,
  165.    },
  166.    xAxis: {
  167.     axisLabel:{
  168.       color: "#9095A7", //刻度线标签颜色
  169.       lineStyle:{
  170.       color:'#9095A7',//更改坐标轴颜色
  171.      },
  172.      },
  173.      axisTick:{show:false},
  174.      axisPointer: {
  175.          lineStyle:{
  176.              color:'rgba(39, 100, 131, 1)'
  177.          }
  178.      },
  179.      //设置轴线的属性
  180.      axisLine:{
  181.          lineStyle: {
  182.          color: '#DFE1EB',//刻度线的颜色
  183.        }
  184.      },
  185.      type: 'category',
  186.      boundaryGap: false,
  187.      data: this.data.xAxisinfo,
  188.  },
  189.  yAxis: {
  190.   splitLine: {
  191.     lineStyle: {
  192.       type: 'dashed',
  193.       color:'#DFE1EB'
  194.     }
  195.    },
  196.    boundaryGap: [0, '50%'],
  197.    type: 'value',
  198.   //  name: 'GMV',
  199.    position: 'left',
  200.    axisLabel: {
  201.        color: "#9095A7", //刻度线标签颜色
  202.        formatter(v) {
  203.            v = v.toString()
  204.            if (v >= 100000000000) {
  205.                return (v.substring(0, 5) / 10) + '亿'
  206.            } else if (v >= 10000000000) {
  207.                return (v.substring(0, 4) / 10) + '亿'
  208.            } else if (v >= 1000000000) {
  209.                return (v.substring(0, 3) / 10) + '亿'
  210.            } else if (v >= 100000000) {
  211.                return (v.substring(0, 2) / 10) + '亿'
  212.            } else if (v >= 10000000) {
  213.                return v.substring(0, 4) + 'w'
  214.            } else if (v >= 1000000) {
  215.                return v.substring(0, 3) + 'w'
  216.            } else if (v >= 100000) {
  217.                return v.substring(0, 2) + 'w'
  218.            } else if (v >= 10000) {
  219.                return (v.substring(0, 2) / 10) + 'w'
  220.            } else if (v >= 1000) {
  221.                return v
  222.            } else {
  223.                return v
  224.            }
  225.        },
  226.    },
  227.    axisPointer: {
  228.      lineStyle:{
  229.          color:'rgba(39, 100, 131, 1)'
  230.      }
  231.  },
  232. },
  233. series: this.data.seriesInfo,
  234. grid: {top: '5%',right:'8%',bottom:'10%',left:'14%'},
  235. }
  236.     
  237. },
  238.  
  239.   /**
  240.    * 生命周期函数--监听页面加载
  241.    */
  242.   onLoad(options) {
  243.     this.echartsComponnet = this.selectComponent('#mychart');
  244.   },
  245.  
  246.   /**
  247.    * 生命周期函数--监听页面初次渲染完成
  248.    */
  249.   onReady() {
  250.  
  251.   },
  252.  
  253.   /**
  254.    * 生命周期函数--监听页面显示
  255.    */
  256.   onShow() {
  257.  
  258.   },
  259.  
  260.   /**
  261.    * 生命周期函数--监听页面隐藏
  262.    */
  263.   onHide() {
  264.  
  265.   },
  266.  
  267.   /**
  268.    * 生命周期函数--监听页面卸载
  269.    */
  270.   onUnload() {
  271.  
  272.   },
  273.  
  274.   /**
  275.    * 页面相关事件处理函数--监听用户下拉动作
  276.    */
  277.   onPullDownRefresh() {
  278.  
  279.   },
  280.  
  281.   /**
  282.    * 页面上拉触底事件的处理函数
  283.    */
  284.   onReachBottom() {
  285.  
  286.   },
  287.  
  288.   /**
  289.    * 用户点击右上角分享
  290.    */
  291.   onShareAppMessage() {
  292.  
  293.   }
  294. })

wxss

  1. page{
  2.   background-color: #F5F5F5;
  3.   color:#212848;
  4. }
  5. .tendency{background-color: #fff;padding: 30rpx;margin-top:20rpx ;}
  6. .sec_title{font-size: 32rpx;font-weight: 500;margin-bottom: 36rpx;}
  7. .chartScreen{display: flex;align-items: center;flex-wrap: wrap;}
  8. .chart_item{display: flex;align-items: center;flex-shrink: 0;margin-right: 30rpx;font-size: 24rpx;margin-bottom: 18rpx;}
  9. .check{width: 28rpx;height: 28rpx; border: 2rpx solid #dbdbdb;border-radius: 4rpx;margin-right: 8rpx;}
  10. .checked0{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF8SURBVHgB7Za/S8NAFMe/76pInUpBF5f+Ce3iqqPgokNBXETcRLAOnXXvYAd1k9ZFBIfWQXHU2UFB3By6OAmSRYst6fNeQrGIlzYxvcV+lnBw3OfejySPoFkpcMZlrgCc1csUYoZA9RZ97tTLyQb5ss79MEQ/cNrUyimX3X0LMiE1zhMVpQNegjU4q2CXlG0hRsLQTKeBzVWCFaHIdreCjxxDTGRmgOKGQuOFcXTKxn2xRCiyPR3ZexM4DJDFIuyVlY47+GgG7zemNL/gF/782nzj+VnyGuT1TUsPOt6zH0bhVNo/0CTtyiSiQWWCMaUnNfYaQCJdW6ZfZUIYWaDQrwl7hy3OfQt6ZVXvUggF5bfdwLaS1JaKCpNJeHJZC5LmoPqa6NulIpHu68qFq9tosoGEwtOzX1NBUlitRZMJA39pLnVUorl7jC4LJRQklX/lf/wPHVhEprYH2IL5QiWI1mEnSqet2gV1VqZGglRO6+sYDo5+oW5k6pZR/wuVDZYh1UtPwwAAAABJRU5ErkJggg==') no-repeat;background-size: 100% 100%;}
  11. .checked1{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGiSURBVHgB7Za9S0JRFMDPfUlqNEgiBAW5NDQEOgRt4ZhTg1BLQVMfk0FLS1FbYNRmtUgfg4NDDelW/QGBkVCBQwo29cGDzCzk3c559cLA9/T5cZf6LfddOO/97jnvcu9hgEwkZt3c2hYB4B6cOqDZcDhiH8pCdHQ7w75kUrIlot/I7F3xSkq7tClARji4lUUkxmAMhME8EojFIVoI/0LTuGxdMDcwCUKEJFv2Bg1jLNAk+jp7YHFwBrIvOQjfHOjGNSVDkq1gZq+lIoRvDw1jGxaWyzZSOzgWDON1Sxpw+/FgYBC7O9F9eaR7WN0gD8VnWEtu4fgE1dAVuuxO9YNEJakmK5TeapYRuiXdS8cgm8+pmU71ByrKiFUTMkMhrTyU2lXL5e/1/QjKZdqizMDGT+e5UYDL5oT1oSXosNjVTGhOxDJxw/+rR9VdSpIQ7j5NTsRzZ3XJahIS13JaLR+Ryd/D/vdzPdR80iQwK+Li8QoawdTRpkkb4W/chzIIBIX8EoShHGObyKdBTJYy3gVBKerD9pspXmrHoTVgMuycHOT6BBgHmtv8l4eBAAAAAElFTkSuQmCC') no-repeat;background-size: 100% 100%;}
  12. .checked2{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGKSURBVHgB7Za/S8NAFMe/CbWDBCm1iIiDLp0cqlNdFBxcdBBxVXDSbnX0r9BNxUHQUQcFXRT8NXVSkW4O7SAo0oZQpEpoe967WlD00qRJb9EPhEvgkU/eu8vd08DJLW8MQAvt8NsEvyIIHHYIVl0Z3EzltU/ZbXtE37DAKsM6tI41BTIIB6+iztOdgToSOtQSUS3Ev9AzoW4DsYUxKBGSrDc97RyDgAj3R9GzNAn7sYjC7rU0LpAMSUaZ1d5sFPauHGN9C7/KXrZOUSvbjvHSkkamRsRondzIQmAk42KBVIqveF4/FmMzpMJQ1IAxGpdKGzLKyK2MkJbUPMiIBUCZRueSv8oILzJHYX1OzsTLuiaGEJsf/yGrf5QJL2i51DZzCqB/q291FnpnWMjpmaAyO82vjKarlCSUaUNOlC6yLclcCYn3hydRPoJKaO5n0Cqud5rSeZaf1UD5Pg8/eNraqJR++RvnoQWFkPAOimCMHem8OV2EmiwtDdW0Tu03dcSiHW+TiF+X5CDXBwmPnVkfFK3qAAAAAElFTkSuQmCC') no-repeat;background-size: 100% 100%;}
  13.  
  14. .checked3{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGgSURBVHgB7ZZNSwJRFIbfew0jUsgiiqAQjIQWleCm2tjKTUHQL3DZrn5Jy9pJ/8BolZtsoS1U1Fy4CoYkSbIyEiRBb/dMKQbO6Pgxm3o2d2Y4M8+ccz8ZJKfBlJNZWFAIbDBgCsOGISTq4vgw4FEYycBZaiSiX06UGw3h4dzCTkYtI4R0UBW5LOM+TILJLuMwEcrSVCHxLzSMfdIK39YiTBGSbM/vksORacaMYUjMOCbg33Gi9FZFJPqgGTeUDElGmdVqddxE87qxAwvbZVcRBZ+y1UOzpN71OZqoSGaKmi+7XQ74tpfwUanhMnyvtt3QFNrkAHAvT6vXnaRNGWXUq4zQLGksUcDLa1VmOo9N70JHGWFEpits9gl9bG11tjW32mWx+PdPGYGdnaeFXoDdZsXB7grGrRZVTvdEQpY5mXmCUbqOUpKEr5WWnMjmSn3JehIShWIFt7J8BJUwFn9Ev/S80tzlntVpouTfMQiGlraslA7KH9gPZb+UYSJcbl1pmIRoiAsuT8QBM7L8cRxxOn5DnojlkxBGgCoSiJCDXF/Qr6qL/ZClCgAAAABJRU5ErkJggg==') no-repeat;background-size: 100% 100%;}
  15.  
  16. .checked4{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGdSURBVHgB7Za/S0JRFMe/72UpEWhgIS5ltLTpf6BTDQ0SYaM155BTLQZtCoWLTkLmaBQY+Ac4NLXoUlOQYYhmmJBJIvq650Hi4I/3tHeX+kzvvnfhw3nnnHuPAEbW6V42QIhLEOxsacLvk2qi43dkUnmBZHqIWY1EvdSY1CHqMRXmICNMevYXRUBygxuCXQRfTLyF+BeqZtqyCOuhD1yEJFsKn7BihPZCw6pNln095lEMRqCp8EfWrjdQDEWG7p1Y2Ct7CYTQqX9iLKHZ68GCdwfDMK67YIudyrJn/zFapVeMQjfowwwrAOOGS36uJJJ9ZdYjH4tIuYwYGGE5GkeTFYB51wPL/l5fGaFGNlTYZrkosJy0ShXMb292e6tXVo6es6p8ghqEB+eWNGwD9dZK7Azi3KwcCa2Jt8QlKhdJqGVklZKkEAh25UT1Oj2WTJGQaOTuUWI5Jaixy5E4xkWndOP7VVo+sT5u7zAJioVElUkn5W/chzVwhKa2HDghQboRBUh0bvGIsiZCOhDXaPxmEzF7kYI2sGCkDDnI9Q1gapfGPx2fagAAAABJRU5ErkJggg==') no-repeat;background-size: 100% 100%;}
  17.  
  18. .checked5{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGbSURBVHgB7ZbLSwJBHMe/rksFhpiIQoee4CUQ7T+IOgQd6uytQ3c9Bh2Luhl19NDNs966FZ26FQkdhLYXBWnZKito7aP5DdkDdHV97KU+MMwsDPvZ78zOwwHG9dHihOh0HrBmmBUPeo6RVjU9Pjl3eOP4lJ31R/QLWdW0iCA6xYQNMsJDoyiwuCuwj7AAe/HYLcS/0DLikB/eYAy2CEnmC+3AMOuDHjHgmoJ3ZgOqIuE1t9u0X08SkswX2oahKijmEqZ9uxZ+yyp4udyCzuqOhO7xKC9muALz8M/ucVkhuw61+oRWNJ1D56CfvXCBt8u3qYaykWDckoxomrAkJfFekeAei8IzvdZQRhQu2peZCnU+J5vQankMjy5/ra2fMvkqiTf2UVZw3J8smS0bvrYCkX04RBdLkufPBA1z+S4Fq7T8S0nyzJLW5YTykOlI1paQqJWyfPgImldZSqJT2t5plMcMr6vFU3SDpa2tLu2Gv3EeyrAREp7DJgzDyAjscroKO1IakDVdjwl0/aYbMdt00ugHBg9zrOpahFwfXxGjuLpZ9F0AAAAASUVORK5CYII=') no-repeat;background-size: 100% 100%;}
  19.  
  20. .echart_line{display: flex;align-items: center;}
  21. .echart_line .echart_line1{height: 420rpx;width:100%;}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/203710
推荐阅读