android 环形进地图条,easyEcharts折线,柱状,饼图,仪表盘,环形,水球,圆柱,地图纯JS绘制...

更新记录

easyEchart1.0.3(2021-04-16)

2021-04-16新增 折线，柱状的图例切换功能http://jstopo.top

实例：line，bar，pie，waterBoll，waterBar

easyEchart1.0.2(2021-03-06)

easyEchart简易图表；

1.line折线图，

2.bar柱状图，

3.pie饼图，

4.Gauge仪表盘，

5，waveBar圆柱

6, waveBoll水球

网站地址 http://jstopo.top

查看更多

平台兼容性

app

微信小程序

支付宝小程序

百度小程序

字节小程序

QQ小程序

快应用

3.1.2

√

×

×

×

×

×

h5-Safari

Android Browser

微信浏览器(Android)

QQ浏览器(Android)

Chrome

IE

Edge

Firefox

pc-Safari

√

√

√

√

√

×

×

√

√

pc端实例：http://jstopo.top 网站本人微信号：jays611

easyEcharts又称简易echarts(本人针对uniapp 的canvas纯JS源码绘制，

如出现bug可以及时在论坛或联系微信，会及时修改。更新时间：2021-05-15 16:29

性能优越！不依赖任何JS包，让使用者可以自行查看分析原理，修改源码！)

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