ECharts的使用

最新推荐文章于 2023-02-24 17:03:23 发布

「已注销」

最新推荐文章于 2023-02-24 17:03:23 发布

阅读量317

点赞数

分类专栏：前端学习文章标签： echarts 微信小程序

本文链接：https://blog.csdn.net/qq_40790989/article/details/90610201

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ECharts的下载

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。
在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

ECharts在页面中的使用

教程地址：https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echarts01</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

Echarts在微信小程序中的使用

地址：https://gitee.com/Q_Augly/wx-charts

githup下载地址：https://github.com/ecomfe/echarts-for-weixin

第一步引入文件

1.将下载下来的文件夹复制到小程序项目的根目录

2.在需要使用的页面的.json配置文件中引入

3.使用

.wxml中声明

我在使用中规定了view的大小

在js文件中可以通过request请求后台数据进行options的渲染

在取得数据后初始化图表数据initChart()

在initChart中声明一个函数setOption,

在setOption中声明getOption获取option实例

最后附上代码

// pages/food/shopDiet.js
import * as echarts from '../../ec-canvas/echarts';

let Chart = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dietId:'',

    calos:'',
    dbz:'',
    zf:'',
    ts:'',
    shop:'',
    shopTime:'',
    otherNu:'',
    comments:'',
    imgUrl:'',
    name:'',

    ec: {
      lazyLoad: true // 延迟加载
    }
  },

  initChart: function () {
    this.echartsComponnet.init((canvas, width, height) => {
      Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      this.setOption(Chart);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },

  getOption: function () {
    return {
      title: {
        text: '三大营养元素分配'
      },
      tooltip: {},
      legend: {
        data: ['含量g']
      },
      xAxis: {
        data: ["蛋白质", "脂肪", "碳水化合物"]
      },
      yAxis: {},
      series: [{
        name: '含量',
        type: 'bar',
        data: [this.data.dbz,this.data.zf,this.data.ts]
      }]
    }
  },

  setOption: function () {
    Chart.clear();  // 清除
    Chart.setOption(this.getOption());
  },


  getData: function (dietIndex){
    let that = this
    wx: wx.request({
      url: 'https://www.yuyutaofree.com/foodManger/getDietById',
      data: {
        'dietId': dietIndex
      },
      header: { 'content-type': 'application/json' },
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function (res) {
        //console.log(res.data)
        that.setData({
          calos:res.data.calos,
          dbz:res.data.dbz,
          ts:res.data.ts,
          zf:res.data.zf,
          shopTime:res.data.time,
          shop:res.data.shop,
          otherNu:res.data.otherNut,
          comments:res.data.comments,
          imgUrl:res.data.imgUrl,
          name:res.data.name
        })
        if (!Chart) {
          that.initChart(); //初始化图表
        } else {
          that.setOption(Chart); //更新数据
        }
      }
    })

    // if (!Chart) {
    //   this.initChart(); //初始化图表
    // } else {
    //   this.setOption(Chart); //更新数据
    // }
  },

  
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.echartsComponnet = this.selectComponent('#mychart');
    this.getData(options.dietIndex);
  },
  onShow:function(){
    Chart =null;
  }

  
  
})

效果图如下：