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({
  /**
   * 组件的初始数据
   */
  data: {
    activeType: 0,
    ec: {
      onInit: initChart
    },
    ec2: {
      onInit: init2Chart
    },
    barEc: {
      onInit: initBarChart
    },
    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(23,210,210,0.1)',
        color: '#17D2D2'
      },
      {
        value: 20,
        label: '展位商品数',
        bgColor: 'rgba(246,151,88,0.1)',
        color: '#F69758'
        
      }
    ],
    chartTypes: [
      {
        icon: 'data_booth',
        name: '展位数据',
        value: 0
      },
      {
        icon: 'data_visitor',
        name: '访客数据',
        value: 1
      },
      {
        icon: 'data_wares',
        name: '商品数据',
        value: 2
      },
    ]
  },

  lifetimes: {
    
  },
  ready () {
  },
  methods: {
    changeActiveType (e) {
      const { value } = e.currentTarget.dataset
      this.setData({
        activeType: value
      })
    }
  }
})

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: ''
    },
    tooltip: {
      formatter: `{a}: {c} \n ${new Date().getFullYear()}-{b}`
    },
    series: [
      {
        data: [500,500,500,500,500],
        type: 'line',
        smooth: true,
        symbolSize: 0,
        name: '浏览量'
      },
    ]
  };

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

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

  var option = {
    title: {
      text: ''
    },
    xAxis: {
      type: 'category',
      data: ['aaa', 'aaa', 'aaa', 'asdsad'],
      axisLabel: {
        align: 'center'
      }
    },
    series: [
      {
        name: '浏览量',
        type: 'bar',
        data: [2.0, 4.9, 7.0, 11],
        barGap: 0,
        barWidth: 10,
        itemStyle: {
          barBorderRadius:[10, 10, 0, 0],
        }
      }
    ]
  };
  chart.setOption(mergeOptions(option));
  return chart;
}

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

  var option = {
    series: [
      {
        data: [1000,1000,1000,1000],
        type: 'line',
        smooth: true,
        name: '客户访问量',
        areaStyle: {
          opacity: 0.1
        },
        symbolSize: 0
      },
      {
        data: [1201, 1201, 1201, 1201, 1201, 1201],
        type: 'line',
        smooth: true,
        name: '商务询盘量',
        areaStyle: {
          opacity: 0.1
        },
        symbolSize: 0
      },
    ]
  };

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