逼疯一个前端入门程序猿--微信小程序--echarts可视化体验

最新推荐文章于 2024-07-20 22:48:06 发布

原创最新推荐文章于 2024-07-20 22:48:06 发布 · 424 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中引入并使用ECharts图表库，包括下载、配置、调用及样式修改步骤，并提供了示例代码。

    ec-canvas文件夹下载：下载 GitHub 上的 ecomfe/echarts-for-weixin 项目（ps：建议使用谷歌浏览器，即Google Chrome，主要是页面全英文，谷歌浏览器可以翻译网页）。
    把下载的echarts-for-weixin-master.zip解压，打开echarts-for-weixin-master文件夹，然后把ec-canvas文件夹复制，再放进小程序项目里即可（要注意放的位置，后边会根据放的位置写调用的路径）。
注：以下的xxx为你要写的呢个页面的名称，由于怕误导写错地方了，所以不已真实文件名写入，除非是共有的比有文件，否则不会以真实名称显示
    在xxx.json中调用，相当于调用组件"usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" }。
    在xxx.js文件中导入import * as echarts from "../../ec-canvas/echarts";（ps：引号里的路径自己看情况写自己的文件路径）。
    在xxx.wxml调用ec-canvas插件

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

想要改样式的话请自行前去更改app.wxss里边的样式，或者自己直接写样式，然后替换样式名就行。（ps：最好是自己改一下，省的出岔子）
重点来了，要在xxx.wxss里写如下样式：

ec-canvas{
  width: 90vw;
  height: 50vh;
}

（必须要写这俩，哪怕你宽高小点，也得写，不然你出不来，默认是没有宽高的）
以下皆乃xxx.js
中编辑：
先写initChart函数

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

  var option = {
   	
  };
  chart.setOption(option);
  return chart;
}

然后在page中写data数据：

page：{
	data:{
		ec: {
      		onInit: initChart
    	},
    }
}

    这里的initChart即上边的呢个initChart函数，ec是xxx.wxml里边的ec = “{{ ec }}”中的后者ec，其实你不难发现的撒！
    这就差不多了，然后去echarts官网点我跳转，实例中的官方实例也好GL实例也罢，在里边找自己想用的，~~然后复制代码，直接拿去用~~ 。
    以折线图的第三个平滑折线图为例：把整个option复制
然后放在initChart里边的var option={}的{}里边
例：

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

  var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
	};

  chart.setOption(option);
  return chart;
}

        就会有这样的一个图：
实例图片
        然后只需要改option里边的数据即可。
        今天就到这了，有什么问题可以私聊哦！基本啥都可撩的哦~
在这里插入图片描述
        这个3d的地球是不是很帅，在GL实例里边有哦

        献上紫女姐姐的美图一张，嘿嘿。
        哦哟，差点忘了重点，逼疯一个程序猿，根本不是难事，甚至还很简单，只需要一个字母（含大小写），标点（含中英文）甚至一个空格就可以，让他的代码整个乱套。切忌死循环哦，今天一个失误，写了一个逻辑死循环，结果就不说了···，感兴趣的自行体验。
        于庚子年皋月廿柒子时作。别问，问就是"乌黑星辰落满地"了。意境自己体悟！！！