建设职业技术学院网站,南京市高淳区城乡建设局网站,住房和城乡建设部网站村镇建设,有趣的网站有哪些本文介绍下小程序中如何使用echarts 如果是通过npm安装#xff0c;这样是全部安装的#xff0c;体积有点大 我这边是使用echarts中的一个组件来实现的#xff0c;下边是具体流程#xff0c;实际效果是没有外边的红色边框的#xff0c;加红色边框的效果是这篇说明
1.echa…本文介绍下小程序中如何使用echarts 如果是通过npm安装这样是全部安装的体积有点大 我这边是使用echarts中的一个组件来实现的下边是具体流程实际效果是没有外边的红色边框的加红色边框的效果是这篇说明
1.echarts光网有提到一个小程序组件 echarts-for-weixin点击下载这个组件下载到本地注意要下载的echarts-for-weixin版本号 2.然后去echarts官网去下载在线定制版本 3.下载成功 4.打开下载的文件找到 echarts.min.js 5.在自己项目里边建一个组件把上边下载的echarts目录放进去然后将echarts.min.js替换掉之前的echarts.js文件替换完成之后需要改变一下ec-canvas.js里边的引入路径如图红色框的位置 6.使用首先在你使用的地方引入这个组件 7.初始化雷达图
// 初始化雷达图init() {let { optionsValue } this.data;function bar(canvas, width, height, dpr) {const chart echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr,});canvas.setChart(chart);let option {title: {text: 自定义雷达图,},radar: [{indicator: [{ text: 信任, max: 5 },{ text: 冲突, max: 5 },{ text: 承诺, max: 5 },{ text: 责任, max: 5 },{ text: 结果, max: 5 },],center: [50%, 50%],radius: 110,startAngle: 90,splitNumber: 4,shape: circle,name: {formatter: {value},textStyle: {color: #333333,},},// 设置区域边框和区域的颜色itemStyle: {normal: {color: #FF92AC,lineStyle: {color: #FF92AC,},},},splitArea: {areaStyle: {color: #fff,shadowColor: rgba(0, 0, 0, 0.3),// shadowBlur: 10,},},axisLine: {lineStyle: {color: #E9E9E9,type: dashed,},},splitLine: {lineStyle: {color: #E9E9E9,type: dashed,},},}],series: [{name: 雷达图,type: radar,silent: false,emphasis: {lineStyle: {width: 4,},},symbolSize: 0,data: [{value: optionsValue,name: 图一,symbol: rect,areaStyle: {color: #FF92AC,},itemStyle: {normal: {color: #FF92AC,lineStyle: {color: #FF92AC,},},},},],},],};chart.setOption(option);return chart;}let str ec.onInit.br;let ec { onInit: bar };this.setData({ec,});},不要忘了设置雷达图的宽高 .ec-box {width: 100%;height: 600rpx;.canvas {width: 260rpx;height: 260rpx;}}以上就是小程序中使用雷达图的流程使用其他折线图、柱状图的原理一样
