easyEcharts3.5移动端echarts，折线，雷达，柱状，地图，饼图，温度计，水球纯js绘制canvas渲染

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

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

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

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

0.new 雷达图

参数实例：

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}
];

0.1温度计

参数实例：

grid = {
    tube:{//上侧管子
        fillColor: "#4CD964",
        x: dom.width/2,//管子距离左侧的 间隔值
        y: 15,//管子最上侧距离顶端 间隔值
        width: 12,//管子的宽度值
        val: 10,//每个刻度代表多少°C
        positive: 0.6,//正数所占管子的长度 0.7 0~1
        negative: 0.4,//负数所占管子的长度 0.3 0~1
    },
    splitLine:{//刻度参数
        len: 9,//长度值
        numer: 10,//切割几份
    },
    waterColor: "#009688",//温度计中间管子 水银颜色
    ball:{//底侧球形
        fillColor: "#009688",//底部大球水银的颜色
        x: dom.width/2,//底侧球形的圆心x轴距离左侧的 值
        y: dom.height-15- 10,// 15是半径 距离最低端 间隔值 10
        R: 15,//半径
    },
};
onTimeC = 35;//当前要显示的温度 35℃

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轴字符类型渲染方法。