微信小程序和h5端使用echarts，并动态改变图表

最新推荐文章于 2024-08-11 15:07:08 发布

置顶

weixin_42026831

最新推荐文章于 2024-08-11 15:07:08 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_42026831/article/details/106724453

版权

本文介绍了如何在微信小程序中使用ECharts，包括下载ECharts微信版，将其引入小程序项目，创建测试页面并配置使用。同时提到了在H5端使用ECharts的情况。

摘要由CSDN通过智能技术生成

一，微信小程序使用echarts;
1.首先，下载echarts微信版地址：https://github.com/ecomfe/echarts-for-weixin

下载后打开如图所示：

2.将ec-canvas目录拷贝到自己的小程序项目中（ec-canvas目录下的echarts.js可以自己在echarts官网自己手动构建需要的图表后替换，减小插件大小）

我是将它拷贝到components（专存放组件的目录）目录下的：

3.创建个test2目录，下面创建index页面（index.wxml,indxe.js,index.wxss,index.json）；

（1）首先在index.json文件下声明使用组件

{
  "navigationBarTitleText": "微信小程序使用echarts",
  "backgroundColor": "#000",
  "navigationBarTextStyle":"white",
  "backgroundColor":"#000",
  "navigationBarBackgroundColor":"#000",
  "usingComponents": {
    "ec-canvas": "../../../components/ec-canvas/ec-canvas" //使用组件，上面都是窗口样式设置
  }
}

（2）index.wxml文件

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{
  { ec }}" 
   bind:init="initChart"></ec-canvas>
   <!-- initChart对应js中的initChart方法，进入页面初始化图标 -->
</view>

（3）index.js文件

import * as echarts from '../../../components/ec-canvas/echarts';//引入echarts
let chart = null;//echart实例，执行 initChart(e)方法后，在里面将它保存到全局变量，后面更改图标数据就可以chart.setOption（），chart.clear()等了；
//下面是option配置里面的变量数据，也可以将它设置到data里面的一个数组或者对象里面，后面数据多时操作方便
let arr1 = [300, 270, 340, 344, 300, 320, 310];
let arr2 = [120, 102, 141, 174, 190, 250, 220];
let arr3 = [-20, -32, -21, -34, -90, -130, -110];
let arr4 =  ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'];
function options(arr1,arr2,arr3,arr4){//这里是将option配置放入函数为的就是可以动态改变参数
//option ,echarts配置对象，可以在echarts中配置好后拿过来 
var option = {
    color: ['red', 'yellow', 'blue'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true
    },
    legend: {
      data: ['热度', '正面', '负面'],
      textStyle:{
        color:'#ffffff',
      }
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          color: '#fff'
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisTick: {