Echarts的使用（小程序）

1. 首先去官网下载echarts图表所需的js文件

2. 创建页面

3. 引入组件 { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }

4. html

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

5. css page{ background-color: #F5F5F5; } .container2{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; box-sizing: border-box; } ec-canvas { width: 100%; height: 360rpx; margin-bottom:16rpx; background-color: #fff; }

6.js

• 引入import * as echarts from '../../ec-canvas/echarts';
• initChart函数 function initChart(canvas, width, height, dpr) { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); var option = { // 饼状图的颜色 color: ["#FF7D52", "#FFF352", "#5AF581", "#52D4FF", "#517CFF", "#7A4DFF"], //提示框组件 tooltip: { show: true, trigger: 'item', formatter: '{d}%' }, // 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。 legend: { formatter: function (name) {}, width: 150, itemWidth: 10, itemHeight: 10, type: 'plain', textStyle: { color:"#000", fontSize: 12, rich: {} }, itemGap: 10, top: '15%', right: 27, }, series: [{ type: 'pie', radius: ['35%', '80%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '16', fontWeight: 'bold' } }, labelLine: { show: false }, center: ['25%', '50%'], data }] }; chart.setOption(option); return chart; }

7.最终效果图

8.难点以及知识点的总结：

难点：

• 提示组件框内容的展示 formatter: '{d}%'

• 图例组件展现 名字及数量的展示 formatter: function (name) { let total = 0; let target; for (let i = 0, l = data.length; i < l; i++) { total += data[i].value; if (data[i].name == name) { target = data[i].value; } } let arr = [ name + '', '{x|' + ((target / total) * 100).toFixed(2) + '%}' ] return arr.join(' ') },

  • 图例组件展现 改变百分比的字体颜色以及间距 arr.join(' ') //间距

textStyle: {rich: {x: {color:"#000",fontWeight: 'bolder',fontSize: 12,borderRadius: 4},}}, //颜色

• 调整扇形图的位置 center: ['25%', '50%'],

知识点：formatter rich