pc端实例: jstopo.top 网站本人 微信号:jays611
easyEcharts 又称 简易echarts (本人针对uniapp 的canvas纯JS源码绘制,
如出现bug可以及时在论坛或联系微信,会及时修改。更新时间:2021-05-15 16:29
性能优越!不依赖任何JS包,让使用者可以自行查看分析原理,修改源码!)
let grid = {
x: dom.width/2,//占总canvas标签元素的宽度一半
y: dom.height/2,//占总canvas元素的高度一半
R: dom.height/2-5,//半径
splitNumber: 5,//分几段圆
textColor: "#565656",//文字颜色
arcColor: "#838383",//圆的线条颜色
areaColor: "rgba(251,180,167,0.8)",//中间多边形区域颜色
arrText = [//数据文字
{name: "2星",part: 0.8},
{name: "3星",part: 0.56},
{name: "4星",part: 0.72},
{name: "5星",part: 0.66},
{name: "6星",part: 0.87}
1. line版块(折线图)
参数实例:
let grid = {
top: (12 * elem.height) / 100, //canvas标签的高度的12%(相对总高的百分比)
bottom: ((100 - 18) * elem.height) / 100, //canvas图形距离底部的百分比 18%
left: (12 * elem.width) / 100, //距离左侧的百分比(12%总宽度)
right: ((100 - 8) * elem.width) / 100 //距离右侧百分比(8%总宽度)
lineColor = "#999", //x,y轴线颜色
fillColor = "#333", //x,y轴number颜色
yAxis = {
textSize: 10, //刻度数字fontSize
maxNumber: 80, //分段的最大值
splitNumber: 5, //分成几段
splitLen: 5, //轴左侧的小横线 -|
marginSplit: 5 //刻度文字与 “-|”的距离
lineWidth = 1,
xAxis = {
textSize: 10, //刻度数字fontSize
maxNumber: 50,
splitNumber: 5,
splitLen: 5,
marginSplit: 5
dotStyle = [{
color: "#fff",
arcR: 4, //半径
dash: 0 //是否线条虚线 0实线 1以上虚线
color: "#fff",
arcR: 4, //半径
dash: 0 //是否线条虚线 0实线 1以上虚线
lineStyle = [{
color: "#4caf50",
lineDotType: "wave", //两圆点的连接线 line直线,wave二次贝塞尔曲线
width: 2, //连线的width
dash: 3 //是否线条虚线 0实线 1以上虚线
color: "#03a9f4",
lineDotType: "wave", //两圆点的连接线 line直线,wave二次贝塞尔曲线
width: 2, //连线的width
dash: 0 //是否线条虚线 0实线 1以上虚线
dataJSON = [//月份数据,字符类型
x: ["1月", "3月", "5月", "9月", "10月", "12月"],//设置字符类型,非Number
y: [69, 28, 70, 65, 76, 65]
x: ["1月", "3月", "5月", "9月","10月","12月"],//非Number类型数据复制第一条x的数据
y: [9, 18, 70, 75, 56, 35]
二者数据类型只能选一种
dataJSON = [ //数据data number类型数据
x: this.sortFn([10, 30, 35, 39, 45, 28]),//sortFn是封装的排序方法
y: [69, 28, 70, 65, 76, 65]
x: this.sortFn([5, 23, 45, 39, 50, 28]),
y: [9, 18, 70, 75, 56, 35]
2. bar版块(柱状图 2d, 伪3d)
伪3d版参数实例:
let grid = {
top: (10 * elem.height) / 100, //canvas标签的高度的12%(相对总高的百分比)
bottom: ((100 - 18) * elem.height) / 100,
left: (12 * elem.width) / 100, //距离左侧的百分比(12%总宽度)
right: ((100 - 8) * elem.width) / 100
lineColor = "#999", //x,y轴线颜色
fillColor = "#333", //x,y轴number颜色
lineWidth = 1,
yAxis = {
textSize: 10, //刻度数字fontSize
maxNumber: 80, //分段的最大值
splitNumber: 5, //分成几段
splitLen: 5, //轴左侧的小横线 -|
marginSplit: 5 //刻度文字与 “-|”的距离
xAxis = {
textSize: 10, //刻度数字fontSize
maxNumber: 50,
splitNumber: 5,
splitLen: 5,
marginSplit: 3
barMargin = 5, //柱子之间间隔
barStyle = [{
faceStyle: [{ //up face
fillColor: "#4ed837",
strokeColor: "#ccc"
}, { //down face
fillColor: "#3f51b5",
strokeColor: "#ccc"
fillColor: "#3f51b5",
strokeColor: "#ccc",
color: "#3f51b5",
lineWidth: 1,
barWidth: 18, //连线的width
dash: 3 //是否线条虚线 0实线 1以上虚线
faceStyle: [{//
fillColor: "#4ed837",
strokeColor: "#ccc"
fillColor: "#03a9f4",
strokeColor: "#ccc"
fillColor: "#03a9f4",
strokeColor: "#ccc",
color: "#03a9f4",
lineWidth: 1,// 使用于ctx.setLineWidth(1)
barWidth: 18, //bar柱子的width
dash: 0 //是否线条虚线 0实线 1以上虚线
xData = ["楚国之汉国争霸", "秦国", "韩国", "魏国", "赵国"],
dataJSON = [ //数据对象
y: [69, 28, 70, 65, 76]
y: [9, 18, 50, 75, 56]
3. Pie饼图,环形图
参数实例:
let radius = {
outside: {//外侧圆
x: (50 * elem.width) / 100,//elem是canvas的dom,50/100是总width的1/2,百分比50%
y: (50 * elem.height) / 100,//50%的元素高作为圆心的y坐标
r: (43 * elem.height) / 100//43%元素的高作为半径
inside: {//内侧圆
r: 50 / 100//占外圈圆的百分比
colorRadius = ["#999", "#34ED56", "#555"], //设置扇形1,2,3颜色
arcWidth = 1, //圆边框线宽
radiusOutStyle = { //环外侧圆样式
fillColor: "#666",//形状颜色对应setFillColor
strokeColor: "#999"//线条颜色对应setStrokeColor
radiusInStyle = { //环内侧圆样式
fillColor: "#f8f8f8",
strokeColor: "#999"
dataJSON = [30, 80, 180]; //colorRadius数据json对应数量
4.map地图 2021-4-26
参数实例:
import map from "@/static/map.js"
mapCenter:{//map整个地图区域中心点位置 默认江西省的板块中心点 经纬度
lng: 116,//经度
lat: 27.25//纬度
colorStyleMap:{//样式参数 map地图 2021-4-26
strokeColor:{
default: "#8f8f8f",//默认样式
isTouch: "#258429",//touch选中样式
textColor: "#333",//文字样式
fillColor:{
default: "#efefef",
isTouch: "#4CD964",
},//地图的样式 map地图组件参数 2021-4-26
max: 28,//缩放的倍数 map地图组件参数 2021-4-26
pointArr: [],//所有地图坐标数组,map地图组件参数 2021-4-26
colorMapIndex: null,//map地图组件参数 2021-4-26
mapIndex: 0,//map地图组件参数 2021-4-26
geoJsonData: map,//高德地图的api数据(下载到js本地/static/map.js)map地图组件参数 2021-4-26
其余水球,水柱,环,参数详情查看源码中函数function实例。更新了lineDraw折线x轴字符类型渲染方法。
这个是topo的跳转路由/pages/topo/topo