微信小程序动态加载图表[echart]

1.引入Echarts

(1)将ec-canvas文件拷贝下来放到你自己的项目中:

(2)在你需要使用Echarts的页面的json文件中引入Echarts

json 复制代码
"usingComponents": {
    "ec-canvas": "../utils/ec-canvas/ec-canvas"
  }

2.使用Echarts

在需要显示图表的页面的wxml中使用Echarts。

html 复制代码
<view>
    <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}" />
</view>

在wxss设置宽度和高度

css 复制代码
ec-canvas {
  width: 100%;
  height: 100%;
}

3.js页面设置Echarts以及动态刷新
有三个注意的点:
1:独立option
2:onReady获取节点
3:更新数据:同时更新init和option

js 复制代码
import * as echarts from "../utils/ec-canvas/echarts";
// 1、独立option
function setOptionData(chart, name1, name2, xdata, ydata) {
  const option = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "#092646",
      axisPointer: {
        type: "shadow",
        label: {
          show: true,
          backgroundColor: "#7B7DDC",
          color: "#FFF",
        },
      },
      textStyle: {
        color: "white", //设置文字颜色
      },
    },
    legend: {
      data: [name1, name2],
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
        color: "#B4B4B4",
        fontSize: 10,
      },
      top: "1%",
    },
    grid: {
      top: "12%",
      left: "1%",
      right: "5%",
      bottom: "2%",
      containLabel: true,
    },
    xAxis: {
      data: xdata,
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.3)",
        },
      },
      axisLabel: {
        color: "rgba(255,255,255,.5)",
        fontSize: 10,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      x: "center",
      type: "value",
      splitLine: { show: false },
      axisLabel: {
        color: "rgba(255,255,255,.5)",
        fontSize: 10,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#195384",
        },
      },
    },
    series: [
      {
        name: name2,
        type: "bar",
        barWidth: 20,
        itemStyle: {
          normal: {
            barBorderRadius: 5,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#956FD4" },
              { offset: 1, color: "#3EACE5" },
            ]),
          },
        },
        data: ydata,
      }
    ],
  };
  chart.setOption(option);
}
Page({
	data:{
		ec: {
	      onInit: null,
	      lazyLoad: true
      	}
	},
	onLoad(){
		this.getStatData()
	},
	onReady() {
		// 2、在页面渲染后拿到节点
    	this.oneComponent = this.selectComponent('#mychart-dom-line');
    },
    getStatData(){
    	const name1 = "name1"
    	const name2 = "name2"
		const xdata = ['a','b','c']
		const ydata = [4,5,6]
    	this.initChart(name1, name2, xdata, ydata)
    },
    initChart(name1, name2, xdata, ydata) {
    	// 3、根据拿到的节点重新init 并 更新数据option
    	this.oneComponent.init((canvas, width, height, dpr) => {
	        const chart = echarts.init(canvas, null, {
	            width: width,
	            height: height,
	            devicePixelRatio: dpr // new
	        });
	        setOptionData(chart, name1, name2, xdata, ydata)
	        this.chart = chart;
	        return chart;
    	});
  	}
})
相关推荐
Emma歌小白1 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子1 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918411 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI2 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220692 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧