1. uniapp EChars图表
（1）Apache ECharts 一个基于 JavaScript 的开源可视化图表库
https://echarts.apache.org/examples/zh/index.html
（1）官网图例
（2）个人实现图例
1.1. 下载echart
1.1.1. 下载
（1）方法一：从 npm 安装
使用 npm 安装 ECharts 到你的 uni-app 项目中。在项目根目录下打开终端，执行以下命令：
npm install echarts --save
（2）方法二：选择需要的模块，在线定制下载
下载 - Apache ECharts
即echarts.min.js 下载
1.1.2. 应用市场插件
在插件市场下载插件，使用hbuilderx导入即可。
https://ext.dcloud.net.cn/plugin?id=4899
1.1.3. 引用
// An highlighted block
import echarts from '@/components/echarts/echarts.vue';
下面的是 echarts.vue的代码 您可以在components 创建一个echarts的文件夹里面放echarts.vue
代码里script.src = ‘./static/echarts.min.js’ （更改路径不行的话，还是建议使用此路径
1.2. 示例代码
1.2.1. echars-helper.js
import echarsData from "../data/echarsData.json";
var ecahrsHelper = {
UNITS: {
'年': 31557600000,
'月': 2629800000,
'天': 86400000,
'小时': 3600000,
'分钟': 60000,
'秒': 1000
},
colorConstant: {
colorArr: [
'#FF3333', 'rgb(21,169,85)', '#0e9fff', '#FF8833',
'#11f6ad', '#9b7516', 'rgb(0,255,255)', '#FFD700',
'#d7b482', '#b01496', '#00ff00', '#A020F0',
'#fbcc00', 'rgb(103,161,181)', '#0acf59',
'#11f6ad', 'rgb(0,255,255)', '#0acf59']
},
getBarLine2Option: function (optionObj) {
var legendArr = []
optionObj.yObj.forEach((item, index) => {
legendArr.push(item.name)
})
var option = {
title: {
text: optionObj.title,
textStyle: {
fontSize: 12,
color: '#666666'
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
// // itemHeight: 8,
// // itemWidth: 8,
// // type: 'scroll',
orient: 'horizontal', // vertical
x: 'right', //可设定图例在左、右、居中
// // y:'bottom', //可设定图例在上、下、居中
// // padding:[0,50,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
// // data: analyseArr,
// //circle:圆形 rect:矩形 roundRect:圆角矩形 triangle:角形
// // diamond:菱形 pin:水滴 arrow:箭头
// icon: 'roundRect',
},
grid: {
left: '2%',
right: '2%',
bottom: '3%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01],
// name:"123",//坐标轴名称。
nameLocation: 'end',//坐标轴名称显示位置。
axisLabel: {//坐标轴刻度标签的相关设置。
// interval:0,
// rotate:"45"
formatter: (value) => {//数字
if (value >= 10000) {
value = (value / 10000) + 'w';
}
if (value >= 1000) {
value = (value / 1000) + 'k';
}
return value;
}
}
},
series: optionObj.yObj
};
return option || '';
},
/**
* 初始化折线、饼状图配置
*/
getBarLineOption: function (optionObj) {
var legendArr = []
optionObj.yObj.forEach((item, index) => {
legendArr.push(item.name)
})
var option = {
title: {
text: optionObj.title,
textStyle: {
fontSize: 15,
color: '#000',
},
},
tooltip: {
trigger: 'axis',
shadowBlur: 0,
textStyle: {
textShadowBlur: 0
},
renderMode: 'richText',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: legendArr,
// itemHeight: 8,
// itemWidth: 8,
// type: 'scroll',
orient: 'horizontal', // vertical
x: 'right',//可设定图例在左、右、居中
// y:'bottom',//可设定图例在上、下、居中
// padding:[0,50,0,0],//可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
// data: analyseArr,
//circle:圆形 rect:矩形 roundRect:圆角矩形 triangle:角形
// diamond:菱形 pin:水滴 arrow:箭头
// icon: 'roundRect',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,
data: optionObj.xArr
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01],
name: "单位(件)",//坐标轴名称。
nameLocation: 'end',//坐标轴名称显示位置。
axisLabel: {//坐标轴刻度标签的相关设置。
interval: 0,
rotate: "0",//坐标轴刻度标签角度
formatter: (value) => {//数字
if (value >= 10000) {
value = (value / 10000) + 'w';
}
if (value >= 1000) {
value = (value / 1000) + 'k';
}
return value;
}
}
},
series: optionObj.yObj
}
return option || '';
},
getPieOption: function (optionObj) {
var totalNum = 0
optionObj.pieArr.forEach((item, index) => {
totalNum += Number(item.value);
})
var option = {
title: {标题
subtext: "",
text: optionObj.title + `\n` + '总数' + `\n` + totalNum + '人次',
top: 'center',
left: 'center',
textStyle: {
fontSize: 11,
}
},
legend: {
itemHeight: 8,
itemWidth: 8,
// type: 'scroll',
orient: 'horizontal', // vertical
x: 'center', //可设定图例在左、右、居中
y: 'bottom', //可设定图例在上、下、居中
// padding:[0,50,0,0],//可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
data: optionObj.pieArr,
//circle:圆形 rect:矩形 roundRect:圆角矩形 triangle:角形
// diamond:菱形 pin:水滴 arrow:箭头
icon: 'rect',
},
tooltip: {//弹出框
//trigger：触发类型,'item'数据项图形触发，主要在散点图，
// 饼图等无类目轴的图表中使用。'axis'坐标轴触发，主要在柱状图，
// 折线图等会使用类目轴的图表中使用。
trigger: 'item',
//triggerOn：提示框触发的条件,'mousemove'鼠标移动时触发。
// 'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。
// 'none'不在 'mousemove' 或 'click' 时触发
//triggerOn:"mousemove",
//是否显示提示框浮层
//showContent:true,
//是否永远显示提示框内容
//alwaysShowContent:false,
//浮层显示的延迟，单位为 ms
//showDelay:0,
//浮层隐藏的延迟，单位为 ms
//hideDelay:100,
//鼠标是否可进入提示框浮层中
//enterable:false,
//是否将 tooltip 框限制在图表的区域内
confine: true,
//提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
//transitionDuration:0.4,
//提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，
// inside鼠标所在图形的内部中心位置，top、left、bottom、right
// 鼠标所在图形上侧，左侧，下侧，右侧，
//position:['50%', '50%'],
//提示框浮层内容格式器，支持字符串模板和回调函数两种形式,
// 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
//formatter:"{b0}: {c0}<br />{b1}: {c1}",
// formatter: '{a} <br/>{b}: {c} ({d}%)'
formatter: '{b} {c} 人({d}%)',
//标题背景色,
//backgroundColor:"white",
//边框颜色
//borderColor:"#ccc",
//边框线宽
//borderWidth:0,
//图例内边距，单位px 5 [5, 10] [5,10,5,10]
padding: 4,
//textStyle：文本样式
textStyle: {
fontSize: 10,
}
},
series: [
{
name: '统计分析',
type: 'pie',
clickable: true, //是否开启点击
minAngle: 2,//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
avoidLabelOverlap: true,//是否启用防止标签重叠策略
hoverAnimation: true,//是否开启 hover 在扇区上的放大动画效果。
silent: false,//图形是否不响应和触发鼠标事件
radius: ['30%', '50%'],
center: ['50%', '50%'],
labelLine: {
normal: {
length: 30, //第一条线
length2: 8, //第二条线
// lineStyle: {
// width: 1, // 线条的宽度
// color: "#000", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
// }
}
},
label: {
// formatter: '{b|{b}}\n \n {per|{d}%} ',
//formatter: '{b|{b}}\n \n {per|{d}%} ',
formatter: '{b|{b}}',
borderWidth: 20,
borderRadius: 4,
padding: [20, 40],
normal: {
formatter(params) {
let text = params.name
if (text.length <= 6) {
return text = text + '\n' + params.percent + '%';
} else if (text.length > 6 && text.length <= 12) {
return text = `${text.slice(0, 6)}\n${text.slice(6)}`
+ params.percent + '%'
} else if (text.length > 12 && text.length <= 18) {
return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12)}`
+ params.percent + '%'
} else if (text.length > 24 && text.length <= 30) {
return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(24)}`
+ params.percent + '%'
} else if (text.length > 30) {
return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(24, 30)}\n${text.slice(30)}`
+ params.percent + '%'
}
},
textStyle: {
fontSize: 8
},
//柱状图颜色
// color: function (params) {
// // 颜色列表返回颜色
// return colorConstant.colorArr[(params.dataIndex
// % colorConstant.colorArr.length)];
// },
},
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
b: {
color: '#4C5058',
fontSize: 12,
fontWeight: 'bold',
lineHeight: 18,
align: "bottom",
font: "Xingkai SC",
},
c: {
fontSize: 12,
lineHeight: 30,
color: '#63BF6A',
align: "center"
},
d: {
fontSize: 10,
lineHeight: 12,
color: '#4C5058',
align: "top"
}
}
},
data: optionObj.pieArr,
itemStyle: {
normal: {
//柱状图颜色
color: function (params) {
// 颜色列表返回颜色
var colorArr = ecahrsHelper.colorConstant.colorArr
return colorArr[(params.dataIndex % colorArr.length)];
},
}
}
}
]
};
return option || '';
},
};
export {
ecahrsHelper
}
1.2.2. pageEchars.vue
<template>
<view class="base-echars-page">
<!--饼状图-->
<view class="base-echars-layout">
<view class="base-echars-title-layout">
<image class="base-echars-title-icon"
src="../../../static/icon/icon-loc.png"></image>
<view class="base-echars-title-title">饼状图</view>
</view>
<view class="base-echars-body">
<l-echart ref="pieChart" @finished="initPieEchars"></l-echart>
</view>
</view>
<!--柱状、柱状图-->
<view class="base-echars-layout">
<view class="base-echars-title-layout">
<image class="base-echars-title-icon"
src="../../../static/icon/icon-loc.png"></image>
<view class="base-echars-title-title">柱状、柱状图</view>
</view>
<view class="base-echars-body">
<l-echart ref="barLinechart" @finished="initBarLineEchars"></l-echart>
</view>
</view>
<!