有勇氣的牛排

官網
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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。