微信小程序图表插件 echarts-for-weixin

有勇气的牛排

官网
https://www.920vip.net/

微信小程序总结大全

下载地址

https://github.com/ecomfe/echarts-for-weixin/tree/master/pages

使用

index.wxml

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

index.css

ec-canvas {width: 100%;height: 100%; }

index.json

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

index.js

import * as echarts from '../../ec-canvas/echarts';const app = getApp();function initChart(canvas, width, height, dpr) {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});canvas.setChart(chart);var option = {title: {text: 'Graph 简单示例'},tooltip: {},animationDurationUpdate: 1500,animationEasingUpdate: 'quinticInOut',series: [{type: 'graph',layout: 'none',symbolSize: 50,roam: true,label: {normal: {show: true}},// edgeSymbol: ['circle', 'arrow'],// edgeSymbolSize: [4, 10],edgeLabel: {normal: {textStyle: {fontSize: 20}}},data: [{name: '节点1',x: 300,y: 300,itemStyle: {color: '#37A2DA'}}, {name: '节点2',x: 800,y: 300,itemStyle: {color: '#32C5E9'}}, {name: '节点3',x: 550,y: 100,itemStyle: {color: '#9FE6B8'}}, {name: '节点4',x: 550,y: 500,itemStyle: {color: '#FF9F7F'}}],// links: [],links: [{source: 0,target: 1,symbolSize: [5, 20],label: {normal: {show: true}},lineStyle: {normal: {width: 4,curveness: 0.2}}}, {source: '节点2',target: '节点1',label: {normal: {show: true}},lineStyle: {normal: { curveness: 0.2 }}}, {source: '节点1',target: '节点3'}, {source: '节点2',target: '节点3'}, {source: '节点2',target: '节点4'}, {source: '节点1',target: '节点4'}],lineStyle: {normal: {opacity: 0.9,width: 2,curveness: 0}}}]};chart.setOption(option);return chart; }Page({onShareAppMessage: function (res) {return {title: 'ECharts 可以在微信小程序中使用啦！',path: '/pages/index/index',success: function () { },fail: function () { }}},data: {ec: {onInit: initChart}},onReady() {} });

总结

以上是生活随笔为你收集整理的微信小程序图表插件 echarts-for-weixin的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。