增加图图表

pages/score/index.js

@@ -1,6 +1,20 @@
 // pages/score/index.js
 import _ from '../../commons/js/commons'
+import * as echarts from '../../ecCanvas/components/ec-canvas/echarts';
 const app = getApp()
+let lineChartData = {};
+function lineChart(canvas, width, height, dpr) {
+  const chart = echarts.init(canvas, null, {
+    width: width,
+    height: height,
+    devicePixelRatio: dpr // new
+  });
+  console.log('chart,',chart)
+  canvas.setChart(chart);
+  let option = lineChartData
+  chart.setOption(option);
+  return chart;
+}
 Page({
 
   /**
@@ -47,6 +61,10 @@ Page({
     setid: '',
     is_biz: 0, //是否选择门店跳转过来
     scoreData: [],
+    showLineChart: false,//是否显示Line图表
+    ecLine: {
+      onInit: lineChart
+    }
   },
 
   /**
@@ -67,7 +85,7 @@ Page({
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady() {
-
+    this.getChartsData()
   },
 
   /**
@@ -113,6 +131,72 @@ Page({
 
   },
 
+  getChartsData(){
+    lineChartData = {
+      backgroundColor: "#ffffff",
+      xAxis: {
+        show: false
+      },
+      yAxis: {
+        show: false
+      },
+      radar: {
+        // shape: 'circle',
+        splitArea: {
+          areaStyle: {
+            color: ['#f6f6f6', '#ffffff']
+          }
+        },
+        indicator: [{
+          name: '食品',
+          max: 500
+        },
+        {
+          name: '玩具',
+          max: 500
+        },
+        {
+          name: '服饰',
+          max: 500
+        },
+        {
+          name: '绘本',
+          max: 500
+        },
+        {
+          name: '医疗',
+          max: 500
+        }
+        ]
+      },
+      series: [{
+        name: '标题',
+        type: 'radar',
+        data: [{
+          value: [430, 340, 500, 300, 490],
+          name: '预算',
+          areaStyle: {
+            normal: {
+              color: 'rgba(0,136,212,0.2)' // 半透明蓝色
+            }
+          },
+          lineStyle: {
+            color: 'rgba(0,136,212,0.8)', // 这里设置线的颜色为红色
+            width: 2 // 线的宽度
+          }
+        }]
+      }]
+    };
+    setTimeout(() => {
+      // lineChart
+      this.setData({
+        showLineChart:true,
+        ['ecLine.onInit']:lineChart,
+      })
+    }, 1000);
+    
+  },
+
   scrollToRule() {
     this.setData({
       setid: 'richhtml'

pages/score/index.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
     "van-circle": "/vant/circle/index",
-    "com-html": "/components/mp-html/index"
+    "com-html": "/components/mp-html/index",
+    "ec-canvas": "/ecCanvas/components/ec-canvas/ec-canvas"
   }
 }

pages/score/index.wxml

@@ -1,6 +1,6 @@
 <!-- pages/score/index.wxml -->
 <view class="container relative" style="min-height:100vh;--circle-text-color:{{score_trend>1?score_down_color:score_up_color}};">
-  <scroll-view class="relative" scroll-y="{{true}}" scroll-into-view="{{setid}}" scroll-with-animation="{{true}}" style="height:100vh">
+  <view class="relative" scroll-y="{{true}}" scroll-into-view="{{setid}}" scroll-with-animation="{{true}}">
     <view class="absolute left-0 top-0 bottom-0 right-0 bg-size-fullwidth bg-no-repeat bg-pos-top" style="background-image:url({{score_trend>1?score_index_bg_down:score_index_bg_up}});"></view>
     <view class="relative inner30">
       <view class="fn-flex fn-flex-middle fn-flex-between inner20">
@@ -47,6 +47,10 @@
           </view>
         </block>
 
+        <view class="echarts-con" style="width:100%;height:500rpx;" wx:if="{{showLineChart}}">
+          <ec-canvas id="mychart-dom-line" ec="{{ ecLine }}"></ec-canvas>
+        </view>
+
         <view class="text-center pt40">
           <view class="ulib-r10 overflowhidden font-24 inline-block">
             <block wx:for="{{tab_rank}}" wx:key="index">
@@ -76,5 +80,5 @@
         <com-html content="{{scoreData.desc}}" lazy-load="{{true}}"></com-html>
       </view>
     </view>
-  </scroll-view>
+  </view>
 </view>