echarts-for-weixin 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。
下载
echarts-for-weixin ec-canvas
如果你想使用最新版本的echarts可以将 ec-canvas 目录下的 echarts.js 替换为最新版的 ECharts。如果希望减小包体积大小，可以使用自定义构建生成并替换 echarts.js。需要注意的是新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 force-use-old-canvas=“true” 的情况下，使用新的 Canvas 2d（默认），使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启。
使用
在项目根目录下创建components文件夹，将下载的ec-canvas放在components文件夹中。
详情可参考echart官网文章来源：https://www.toymoban.com/news/detail-775478.html
使用ec-canvas实现蜘蛛网案例：
在components中创建radar组件
<!--components/radar/radar.wxml-->
<view class="container">
<ec-canvas class="ec-canvas" id="mychart-dom-radar" isUseNewCanvas="{{ true }}" canvas-id="mychart-radar" ec="{{ ec }}"></ec-canvas>
</view>
/* components/radar/radar.wxss */
.container,.ec-canvas{
width: 100%;
height: 100%;
}
import * as echarts from '../ec-canvas/echarts';
Component({
/**
* 组件的属性列表
*/
properties: {
data: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
ec: {
// onInit: initChart,
lazyLoad: true, // 懒加载
}
},
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
this.initchart(this.data.data)
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
this.initchart(this.data.data)
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
/**
* 数据监听器
*/
observers: {
'data': function(val){
this.initchart(val)
}
},
/**
* 组件的方法列表
*/
methods: {
loadchart(data){
// 绑定组件（ec-canvas标签的id）
let ec_canvas = this.selectComponent('#mychart-dom-radar');
ec_canvas.init((canvas,width,height,dpr)=>{
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 解决模糊显示的问题
})
// echart表格的内容配置
var option = {
backgroundColor: "#ffffff",
xAxis: {
show: false
},
yAxis: {
show: false
},
radar: {
// 雷达图每个指示器名称的配置项。
axisName: {
color: 'rgba(102, 102, 102, 1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular, PingFang SC',
fontWeight: 400,
},
// 指示器名称和指示器轴的距离
nameGap: 8,
// 指示器轴的分割段数
splitNumber: 4,
// 坐标轴轴线
axisLine: {
lineStyle: {
color: 'rgba(234, 234, 234, 1)',
width: 1.5
}
},
splitLine: {
lineStyle: {
color: 'rgba(234, 234, 234, 1)',
width: 1.5
}
},
splitArea: {
areaStyle: {
color: ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)']
}
},
// 雷达器的指示器
indicator: [{
name: '指示器1',
max: 4,
},
{
name: '指示器2',
max: 4,
},
{
name: '指示器3',
max: 4,
},
{
name: '指示器4',
max: 4,
},
{
name: '指示器5',
max: 4,
},
{
name: '指示器6',
max: 4,
}
]
},
series: [{
type: 'radar',
symbol: 'none',
data: [
{
value: data,
lineStyle: {
color: "rgba(209, 189, 128, 1)",
width: 2,
},
areaStyle: {
color: "rgba(209, 189, 128, 0.3)"
}
}
]
}]
};
chart.setOption(option);
return chart;
})
},
initchart(data){
// 传递后台数据到图表中，进行懒加载图表
this.loadchart(data);
},
}
})
{
"component": true,
"usingComponents": {
"ec-canvas": "/components/ec-canvas/ec-canvas"
}
}
在页面中使用蜘蛛网组件
<scroll-view style="height: 500px" scroll-y>
<view class="radar">
<my-radar data="{{radarData}}"></my-radar>
</view>
</scroll-view>
/* pages/zxm-radar/index.wxss */
.radar{
width: 570rpx;
height: 570rpx;
}
// pages/zxm-radar/index.js
Page({
/**
* 页面的初始数据
*/
data: {
radarData: [1, 2, 4, 3, 2, 1]
},
})
{
"usingComponents": {
"my-radar": "/components/radar/radar"
}
}
在此过程中发现当页面中有滚动时，虽然使用了2d渲染，但在模拟器中图层会在上层，手机上在同层，目前没有想到较好的方式解决，欢迎小伙伴们留言交流探讨，至此实现蜘蛛网就结束了，当然你在项目中还是需要根据实际情形来处理。
文章来源地址https://www.toymoban.com/news/detail-775478.html
到了这里，关于小程序中使用echarts，案例一：实现蜘蛛网（雷达图）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
