逼疯一个前端入门程序猿--微信小程序--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实例里边有哦
在这里插入图片描述

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值