haowanShow/miniprogram/dataReport/components/scene-report/scene-report.js

import * as echarts from '../ec-canvas/echarts'
import { mergeOptions } from '../ec-canvas/defaultOption'
import CensusApi from '../../../apis/census'

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    sceneNum: {
      type: String,
      observer: function (val) {
        if (!this.properties.date || !this.properties.sceneNum) return;
        CensusApi.getSceneCensus({date: this.properties.date, sceneNum: val})
      }
    },
    date: {
      type: String,
      observer: function (val) {
        if (!this.properties.date || !this.properties.sceneNum) return;
        CensusApi.getSceneCensus({date: val, sceneNum: this.properties.sceneNum})
      }
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      onInit: initChart
    },
    dataNumList: [
      {
        value: 20,
        label: '场景商品数',
        key: 'goods_num',
        bgColor: 'rgba(115,142,254,0.1)',
        color: '#738EFE'
      },
      {
        value: 20,
        label: '解说视频数',
        key: 'video_num',
        bgColor: 'rgba(77,174,255,0.1)',
        color: '#4DAEFF'
      },
      {
        value: 20,
        label: '场景点位数',
        bgColor: 'rgba(246,151,88,0.1)',
        color: '#F69758'
      },
      {
        value: 20,
        label: '平均视频观看',
        bgColor: 'rgba(23,210,210,0.1)',
        color: '#17D2D2'
      },
      {
        value: 20,
        label: '平均页面停留',
        bgColor: 'rgba(250,212,59,0.1)',
        color: '#FAD43B'
      },
      {
        value: 20,
        label: '名片交换数',
        bgColor: 'rgba(19,29,52,0.05)',
        color: '#131D34'
      },
    ]
  },

  lifetimes: {
    
  },
  ready () {
  },
  methods: {
    
  }
})

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '场景浏览数据'
    },
    series: [
      {
        data: [[0, 1000], [3, 500], [6, 750], [9, 1400], [12, 1250], [15, 1600], [18, 1800]],
        type: 'line',
        smooth: true,
        name: '主页访问量',
        symbolSize: 0
      },
    ]
  };

  chart.setOption(mergeOptions(option));
  return chart;
}