微信小程序使用ECharts图表绘制环形图柱状图雷达图
目录
【微信小程序】使用ECharts图表绘制环形图、柱状图、雷达图
小程序中使用echarts
官网中介绍到： 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。
echarts.js文件很大，如果包空间不够的话可以官网定制
接下来就开始往你的小程序里面植入了。你可以自己新建一个components，把echarts这个目录放进去，原目录中的echarts.js删了不要,太大了,换成上一步下载的echarts.min.js，还有一点注意的就是ec-canvas.js的import引入的是原来的echarts.js文件，你需要自己改成刚才下载的文件
页面使用echarts
<ec-canvas id="depTypeChart" ec="{{chartObj}}"></ec-canvas>import * as echarts from '../../../../../utils/ec-canvas/echarts';//引入图表
//图表:延迟加载
chartObj: {lazyLoad: true},
环形图
效果图
/**
图表
**/
var option = chart_util.chartUtil('pie');
//设置颜色
option.color= ['#344EFF', '#93F1D3','#FA7B4B','#9FE080'];
option.legend.data = ['高层','中层','基层'];
option.series[0].data = [{name: "高层", value: "151749.86"}, {name: "中层",value: "375527.67"}, {name: "基层", value: "471755.13"}];
//图例位置
option.legend.top = "75%";
option.series[0].label= {
normal: {
//设置文字样式
formatter: "{a|} \n {b} \n{hr|}\n {d}% \n {c}元",
show: true,
position: 'right',
rich: {
a: {
padding: [0, -80, -15, -80]
},
hr: {
height: 5,
width: 5,
backgroundColor: 't',
lineHeight: 5,
marginBottom: 10,
padding: [0, -5],
borderRadius: 5,
}
},
},
}
//图表
option.series[0].avoidLabelOverlap = true;
var chartComponnet = that.selectComponent('#depTypeChart');
that.drawChart(option, chartComponnet); //绘图
drawChart(option, chartComponnet) {
//console.log('option==>', option);
var that = this;
const getPixelRatio = () => {
let pixelRatio = 0
wx.getSystemInfo({
success: function (res) {
pixelRatio = res.pixelRatio
},
fail: function () {
pixelRatio = 0
}
})
return pixelRatio
}
var dpr = getPixelRatio()
// 上述代码是wx获取设备的像素值 dpr
if (chartComponnet) {
chartComponnet.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 获取到的像素值赋值给devicePixelRatio， 在echarts中必写
});
chart.setOption(option, true);
return chart;
});
}
},
柱状图
效果图
var option = chart_util.chartUtil('bar');
option = {
xAxis: {
type: 'category',
data: ["行政管理得分", "后勤服务满意度得分"],
axisLabel:{
interval:0,
// x轴文本换行
formatter: function (params) {
var newParamsName = '' // 最终拼接成的字符串
var paramsNameNumber = params.length // 实际标签的个数
var provideNumber = 5 // 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
// 循环每一行,p表示行
for (var p = 0; p < rowNumber; p++) {
var tempStr = "" // 表示每一次截取的字符串
var start = p * provideNumber // 开始截取的位置
var end = start + provideNumber // 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) tempStr = params.substring(start, paramsNameNumber)
else tempStr = params.substring(start, end) + "\n" // 每一次拼接字符串并换行
newParamsName += tempStr // 最终拼成的字符串
}
} else {
newParamsName = params // 将旧标签的值赋给新标签
}
return newParamsName
}
}
},
yAxis: {
type: 'value'
},
series: [
{
name: '目标值',
type: 'bar',
label:{
show: true,
position: 'top',
formatter: (value,index)=> {
return value?.value;
}
},
itemStyle: {
normal: {
borderWidth: 1,
color: { type: 'linear', x: 1, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0,
color: '#3476FF' // 0% 处的颜色
}, {
offset: 1,
color: '#34DFFF' // 100% 处的颜色
}],
globalCoord: true, // 缺省为 false
},
barBorderRadius: [20, 20, 0, 0],
label: {
show: true, //设置是否显示数值
position: 'top',
textStyle: {
color: '#222222'
},
formatter: function (params) {
if (params.value == 0) {
return '';
} else {
return params.value;
}
}
},
},
},
data: [85, 85]
},
{
name: '实际值',
type: 'bar',
label:{
show: true,
position: 'top',
formatter: (value,index)=> {
return value?.value;
}
},
itemStyle: {
normal: {
borderWidth: 1,
color: { type: 'linear', x: 1, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0,
color: '#9FE080' // 0% 处的颜色
}, {
offset: 1,
color: '#CFEFBF' // 100% 处的颜色
}],
globalCoord: true, // 缺省为 false
},
barBorderRadius: [20, 20, 0, 0],
label: {
show: true, //设置是否显示数值
position: 'top',
textStyle: {
color: '#222222'
},
formatter: function (params) {
if (params.value == 0) {
return '';
} else {
return params.value;
}
}
},
},
},
data: [90, 91.57]
},
{
name: '权重',
type: 'bar',
label:{
show: true,
position: 'top',
formatter: (value,index)=> {
return value?.value;
}
},
itemStyle: {
normal: {
borderWidth: 1,
color: { type: 'linear', x: 1, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0,
color: '#93F1D3' // 0% 处的颜色
}, {
offset: 1,
color: '#C9F8E9' // 100% 处的颜色
}],
globalCoord: true, // 缺省为 false
},
barBorderRadius: [20, 20, 0, 0],
label: {
show: true, //设置是否显示数值
position: 'top',
textStyle: {
color: '#222222'
},
formatter: function (params) {
if (params.value == 0) {
return '';
} else {
return params.value;
}
}
},
},
},
data: [60, 40]
},
],
grid:{
x: 40, //距离左边
x2: 20, //距离右边
y:30, //距离上边
y2:100,//距离下边
},
legend: {
data: ['目标值','实际值','权重'],
bottom:40
},
var chartComponnet = that.selectComponent('#axDepChart');
that.drawChart(option, chartComponnet);//方法同环形图
雷达图
效果图
that.echartsComponnetdep = that.selectComponent('#chart_depScore');
var option = {
color: ["#338bfd", "#fe2e42"],
legend: {
bottom: "1%",
itemWidth: 20,
itemHeight: 12,
data:['他评得分','自评得分']
},
textStyle: { // 图例的公用文本样式。
fontSize: 12,
color: '#102552',
fontFamily: "PingFangSC-Regular, PingFang SC",
},
name: {
//纬度标题5字换行
formatter: function (value) {
let list = value.split("");
let result = "";
for (let i = 1; i <= list.length; i++) {
if (!(i % 4) && list[i] != undefined) {
result += list[i - 1] + '\n';
} else {
result += list[i - 1];
}
}
return result;
},
},
radar: {
indicator: [{name: "职业素养", max: 5},{name: "沟通交流", max: 5},{name: "执行力", max: 5},{name: "团队协作", max: 5},{name: "竞争意识", max: 5},{name: "学习创新", max: 5},{name: "战略规划能力", max: 15},{name: "领导力素质", max: 15},{name: "组织管理能力", max: 10},{name: "计划部署能力", max: 15}, {name: "经营管理能力", max: 15}
],
center: ['50%', '50%'],
radius: 100,
splitNumber: 4,
shape: 'circle',
splitArea: {
areaStyle: {
color: ['rgba(236,233,255,0.3)', 'rgba(250,239,235,0.3)', 'rgba(250,239,235,0.1)']
}
},
},
series: [
{
type: 'radar',
data: [
{
name:'他评得分',
value: [4, 4, 5, 4, 5, 4, 14, 15, 9, 14, 15],
lineStyle: {
type: 'dashed',
color: '#3476ff',
opacity: '0.3',
width: 1
},
areaStyle: {
opacity: 0.1
},
label: {
normal: {
alignTo: 'labelLine',
textStyle: {
color: '#588dfb',
fontSize: 13,
fontWeight: 'bolder'
},
padding: -5,
}
},
},
{
name:'自评得分',
value: [3, 4, 0, 4, 3, 5, 13, 14, 10, 15, 15],
lineStyle: {
type: 'dashed',
color: '#3476ff',
opacity: '0.3',
width: 1
},
areaStyle: {
opacity: 0.1
},
label: {
normal: {
alignTo: 'labelLine',
textStyle: {
color: '#588dfb',
fontSize: 13,
fontWeight: 'bolder'
},
padding: -5,
}
},
}
]
}
],
};
that.drawChart(option,that.echartsComponnetdep);//方法同上