淘先锋技术网

首页 1 2 3 4 5 6 7

原生小程序使用Echarts图表之再封装一层实现项目需求

echarts支持小程序使用图表， GitHubd地址拿去： https://github.com/ecomfe/echarts-for-weixin

官方文档写的很详细了，按照官方文档一步步来，都能实现。下面是我踩的两个坑：

1、移到自己项目图表不显示也不报错？

      这个问题很简单，打开调试器看到样式就知道是宽或者高没有给，到时没有显示，因为下面层使用100%来获取宽高的。

2、没找到方法动态设置图表数据？

     这个问题就有点坑了，主要就是怪自己粗心。（下载下来的demo小程序首页有很多图表，我直接就跑到了雷达表看代码，发现，用了一下发现没有给出动态设置数据的方法，本来就知道用那个把chart.setOption()可以动态改变。雷达表的例子没有把那个初始化得到的chart全局出来，看看那个bar图表的例子就发现他是用的全局chart）。

 

 

但是如果你觉得官方那种用法还是有点难受的话，每个页面前面都要加上这么一大串代码，看着都难受，那么可以看看下面我封装的这个方法。把重复的东西抽出来。

使用方法：

1、把下载gitHub例子下的 ec-canvas组件文件夹拷贝到自己的项目里面。（组件习惯放在component文件夹下）

2、把下面的echarts-init.js文件放在自己的js存放文件中（这里我放在util文件下）

import * as echarts from '../component/ec-canvas/echarts';
// 雷达图表配置
let optionRadar = {
  backgroundColor: "#ffffff",
  textStyle: {
    color: "#666666"
  },
  xAxis: {
    show: false
  },
  yAxis: {
    show: false
  },
  radar: {
    indicator: [{
      name: '力量',
      max: 500
    },
    {
      name: '敏捷',
      max: 500
    },
    {
      name: '法攻',
      max: 500
    },
    {
      name: '魔抗',
      max: 500
    },
    {
      name: '护甲',
      max: 500
    },
    {
      name: '物攻',
      max: 500
    }
    ]
  },
  series: [{
    type: 'radar',
    backgroundColor: "#f0f",
    itemStyle: {
      color: "#81D8D0",
      borderColor: "#81D8D0"
    },
    lineStyle: {
      color: "#81D8D0",
      width: 4
    },
    areaStyle: {
      color: "#81D8D0"
    },
    data: [{
      value: [230, 340, 300, 250, 400, 100]
    }
    ]
  }]
}
// 折线表
let optionLine = {
  color: ["#eeeeee"],
  grid: {
    show: true,
    borderColor: '#fff',
    bottom: 30,
    left: 20,
    right: 20,
    height: 110
  },
  tooltip: {
    show: true,
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    "axisTick": {
      inside: true,
      length: 100,
      alignWithLabel: true,
      lineStyle: {
        type: 'dashed'
      }
    },
    "axisLabel": {
      fontSize: 10,
      interval: 0
    },
    data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
    axisLine: {
      lineStyle: {
        color: "#dddddd",
      }
    }
  },
  yAxis: {
    show: false,
    x: 'center',
    type: 'value',
    min: 0,
    max: 100,
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
    // show: false
  },
  series: [{
    type: 'line',
    smooth: true,
    lineStyle: {
      color: "#dddddd",
      width: 6
    },
    itemStyle: {
      normal: {
        color: '#81D8D0'
      }
    },
    symbol: 'none',
    symbolSize: '6',
    data: [18, 36, 65, 30, 78, 40, 33,10, 20, 30, 20, 30, 25, 12, 15, 23, 34, 24, 26, 15]
  }]
};
let chartData = {
  "radar": { // 雷达图表
    option: optionRadar,
    chart: null
  },
  'line' : {
    option: optionLine,
    chart: null
  }
}

let chart = null;
function getChart(type) {
  if (!type) {
    console.error("要获取图表名必传！");
    return null;
  }
  return chartData[type].chart;
}
/**
 * 初始化: 如下使用方法
 * this.data.chartR.init((canvas, width, height, dpr) => {
      charts.initChart(canvas, width, height, dpr, 'radar') // 注意最后一个参数自己定义的，后面使用用这个做区分
    });
*/
function initChart(canvas, width, height, dpr, type) {
  if(!type) {
    console.error("图表名必传（为了一个页面使用多个图表区分的id）");
    return false;
  }
  chartData[type].chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chartData[type].chart);
  chartSetOption(type);
  return chartData[type].chart;
}

/**
 * 绘制表格数据
*/
function chartSetOption(type, data = null) {
  if(!type || !chartData[type]) {
    console.error("图表id必传或者未找到图表:" + type);
    return false;
  }
  if(data) {  // 如果传了data则要替换
    setOption(type, data);
  }
  chartData[type].chart.setOption(chartData[type].option);
}
/**
 * 设置图表数据
*/
function setOption(type, data) {
  if (!type || !chartData[type]) {
    console.error('图表id必传或者未找到图表:' + type);
    return false;
  }
  if(!data) {
    console.error('没有要更新的数据');
    return false;
  }
  if (type == "radar") { // 雷达图
    chartData[type].option.series[0].data = data;
  }
}

/**
 * 删掉图表对象(节约空间)
*/
function closeChart(type) {
  if (!type || !chartData[type]) {
    console.error("图表id必传或者未找到图表:" + type);
    return false;
  }
  chartData[type].chart = null;
}
export default {
  getChart,  // 得到图表对象
  initChart,  // 初始化图表
  setOption,  //  设置图表内容
  chartSetOption,  //  动态改变图表内容
  closeChart,  // 删除图表对象
}

3、页面引入组件---->页面引入echarts-init.js文件---->使用echarts-init.js

json文件引入组件：

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

js文件引入echarts-init.js及使用：

// 引入echarts-init.js
import charts from '../../utils/echarts-init.js'
Page({
  data: {

  },
  onLoad() {
    // 初始化图表
    this.data.chartR = this.selectComponent('#mychart-dom-graph');
    this.data.chartR.init((canvas, width, height, dpr) => {
      // initChart(canvas, width, height, dpr, 'radar') 前四个参数必须这样写的，第五个参数即自己命名区分这个图表的唯一名字（不能是中文）
      charts.initChart(canvas, width, height, dpr, 'radar')
    });
  },
  change() {  // 点击事件
    // 动态设置图表数据 chartSetOption(type, data)  type表示自己定义的图表唯一区分的名字， data-即要修改的数据
    // 需要根据自己的需要在echarts-init.js文件里面自己定制
    charts.chartSetOption('radar', [{ value: [130, 40, 100, 300, 490, 400]}])
  }
});

html文件内容：

<view>
  <button bindtap="change">改变</button>
  <view class="page">
    <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph"></ec-canvas>
  </view>
</view>

css文件内容：

.page {
  display: flex;
  flex-direction: column;
  height: 450rpx;
  margin-top: 30rpx;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

 

echarts-init.js上面写有两个例子用法，要加上功能需要自己在文件里面定制自己的内容

在echartData参数里面照例子注册表格，调用方法用的type参数就是注册表格的参数。

不同表格数据修改估计要不一样，就需要想例子中的 radar表格一样，自己定制数据更改地方：

/**
 * 设置图表数据
*/
function setOption(type, data) {
  if (!type || !chartData[type]) {
    console.error('图表id必传或者未找到图表:' + type);
    return false;
  }
  if(!data) {
    console.error('没有要更新的数据');
    return false;
  }
  if (type == "radar") { // 加逻辑判断同表格需要更改数据地方不一样
    chartData[type].option.series[0].data = data;
  }
}

 

这样就可以愉快地写代码了。