cxw-010203

components/c-echars/index.js

@@ -0,0 +1,64 @@
+// pages/components/custom-echarts/index.js
+import * as echarts from '../../ec-canvas/echarts'  //将ec-canvas文件中的echarts对象引进来
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {  // 
+    chartId: {     //  图表id
+      type: String
+    },
+    canvasId: { type: String },      // canvas 的id
+    height: { type: String },   	  // 图表的高度
+    showChart: {   					 // 控制图表的显示时机
+      type: Boolean
+    },
+    chartOption: {                   // 图表option对象
+      type: Object,
+      observer: function () {   // 监听图表option的变化，实现动态渲染
+        this[this.data.chartId] = this.selectComponent('#' + this.data.chartId)
+        this.initChart()
+      }
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    ec: {
+      lazyLoad:true  // 设置图表懒加载
+    }
+  },
+  lifetimes: {// 定义组件声明周期函数,在特定时机触发
+    // ready() { // 组件加载完成--初始化echarts
+    //   this[this.data.chartId] = this.selectComponent('#' + this.data.chartId)
+    //   this.initChart()
+    // },
+    detached(e) {      // 组件移除
+      this[this.data.chartId] = null
+      this[this.data.canvasId] = null
+      this[this.data.showChart]=false
+  },
+},
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    initChart() {
+      this[this.data.chartId]?.init((canvas, width, height, dpr) => {
+        const chart = echarts.init(canvas, null, {    // 配置图表的配置项
+          width:width,   // 宽度
+          height: height,   // 高度
+          devicePixelRatio:dpr// 像素
+        })
+        chart.setOption(this.getOption())
+        return chart
+      })
+    },
+    getOption() {
+      var chartOption = this.data.chartOption
+      return chartOption
+    }
+  }
+})

components/c-echars/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

components/c-echars/index.wxml

@@ -0,0 +1,4 @@
+<!--pages/components/custom-echarts/index.wxml-->
+<view style="height: {{ height }};width:100%">
+  <ec-canvas force-use-old-canvas="{{true}}" wx:if="{{showChart}}" id="{{ chartId }}" canvas-id="eventBar" ec="{{ec}}" options="{{chartOption}}"></ec-canvas>
+</view>

components/c-echars/index.wxss

@@ -0,0 +1,8 @@
+ec-canvas {
+    width: 100%;
+    height: 100%;
+}
+canvas {
+    width: 100%;
+    height: 100%;
+}

pages/bar/index.js

@@ -112,14 +112,6 @@ function initChart(canvas, width, height, dpr) {
 }
 
 Page({
-  onShareAppMessage: function (res) {
-    return {
-      title: 'ECharts 可以在微信小程序中使用啦！',
-      path: '/pages/index/index',
-      success: function () { },
-      fail: function () { }
-    }
-  },
   data: {
     ec: {
       onInit: initChart

pages/varComm/index.js

@@ -2,6 +2,107 @@
 
 Page({
     data: {
+        showChart: true,
+        chartOption: {
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+              },
+              confine: true
+            },
+            legend: {
+              data: ['热度', '正面', '负面']
+            },
+            grid: {
+              left: 20,
+              right: 20,
+              bottom: 15,
+              top: 40,
+              containLabel: true
+            },
+            xAxis: [
+              {
+                type: 'value',
+                axisLine: {
+                  lineStyle: {
+                    color: '#999'
+                  }
+                },
+                axisLabel: {
+                  color: '#666'
+                }
+              }
+            ],
+            yAxis: [
+              {
+                type: 'category',
+                axisTick: { show: false },
+                data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
+                axisLine: {
+                  lineStyle: {
+                    color: '#999'
+                  }
+                },
+                axisLabel: {
+                  color: '#666'
+                }
+              }
+            ],
+            series: [
+              {
+                name: '热度',
+                type: 'bar',
+                label: {
+                  normal: {
+                    show: true,
+                    position: 'inside'
+                  }
+                },
+                data: [300, 270, 340, 344, 300, 320, 310],
+                itemStyle: {
+                  // emphasis: {
+                  //   color: '#37a2da'
+                  // }
+                }
+              },
+              {
+                name: '正面',
+                type: 'bar',
+                stack: '总量',
+                label: {
+                  normal: {
+                    show: true
+                  }
+                },
+                data: [120, 102, 141, 174, 190, 250, 220],
+                itemStyle: {
+                  // emphasis: {
+                  //   color: '#32c5e9'
+                  // }
+                }
+              },
+              {
+                name: '负面',
+                type: 'bar',
+                stack: '总量',
+                label: {
+                  normal: {
+                    show: true,
+                    position: 'left'
+                  }
+                },
+                data: [-20, -32, -21, -34, -90, -130, -110],
+                itemStyle: {
+                  // emphasis: {
+                  //   color: '#67e0e3'
+                  // }
+                }
+              }
+            ]
+          }
+
+        
     },
     onShow() {
         this.getTabBar().init();

pages/varComm/index.json

@@ -1,5 +1,5 @@
 {
     "usingComponents": {
-        
+        "c-echars": "../../components/c-echars/index"
     }
 }

pages/varComm/index.wxml

@@ -1,3 +1,3 @@
 <view class="container">
-  <text>对比</text>
+  <c-echars showChart="{{showChart}}" canvasId="eventbar-canvas" chartId="eventbar" chartOption="{{chartOption}}" height="100%"></c-echars>
 </view>