PC side example: jstopo. Top website my wechat id: Jays611

EasyEcharts also known as simple Echarts (I for uniApp canvas pure JS source code drawing,

If there is a bug, you can timely contact the forum or wechat, we will timely modify. Update at: 2021-05-15 16:29

Superior performance! Does not rely on any JS package, so that users can view the analysis principle, modify the source code!

0. New radar map

Parameter examples:

let grid = {
	x: dom.width/2.// Takes half the width of the total Canvas tag element
	y: dom.height/2.// Is half the height of the total canvas element
	R: dom.height/2-5./ / radius
	splitNumber: 5.// Divide into several circles
	textColor: "# 565656".// Text color
	arcColor: "# 838383".// Circle line color
	areaColor: "Rgba (251180167,0.8)".// Middle polygon area color
},
arrText = [// Data literal
{name: "Two stars.".part: 0.8},
{name: "Three stars".part: 0.56},
{name: "Four star".part: 0.72},
{name: "5 stars".part: 0.66},
{name: "Six star".part: 0.87}];Copy the code
1. Line section (Line chart)

Parameter examples:

let grid = {
        top: (12 * elem.height) / 100.// 12% of the canvas tag height (relative to the total height)
        bottom: ((100 - 18) * elem.height) / 100.// The canvas graph is 18% away from the bottom
        left: (12 * elem.width) / 100.// Percentage of distance to the left (12% total width)
        right: ((100 - 8) * elem.width) / 100 // Percentage of distance to right side (8% total width)
    },
    lineColor = "# 999".//x,y axis color
    fillColor = "# 333".//x,y number
    yAxis = {
        textSize: 10.// Scale number fontSize
        maxNumber: 80.// The maximum value of segments
        splitNumber: 5.// Divide into several sections
        splitLen: 5./ / shaft on the left side of the horizontal - |
        marginSplit: 5 / / calibration distance between text and "|"
    },
    lineWidth = 1,
    xAxis = {
        textSize: 10.// Scale number fontSize
        maxNumber: 50.splitNumber: 5.splitLen: 5.marginSplit: 5
    },
    dotStyle = [{
        color: "#fff".arcR: 4./ / radius
        dash: 0 // Whether dotted line 0 solid line 1 and above dotted line
    },
    {
     	color: "#fff".arcR: 4./ / radius
        dash: 0 // Whether dotted line 0 solid line 1 and above dotted line
    }],
    lineStyle = [{
        color: "#4caf50".lineDotType: "wave".// The line between two dots is a straight line, wave a quadratic Bezier curve
        width: 2.// Width of the line
        dash: 3 // Whether dotted line 0 solid line 1 and above dotted line
    },
    {
        color: "#03a9f4".lineDotType: "wave".// The line between two dots is a straight line, wave a quadratic Bezier curve
        width: 2.// Width of the line
        dash: 0 // Whether dotted line 0 solid line 1 and above dotted line
    }],
    dataJSON = [// Month data, character type
    {
        x: ["January"."March"."May"."September"."October"."December"].// Set the character type, not Number
        y: [69.28.70.65.76.65] {},x: ["January"."March"."May"."September"."October"."December"].// Copy the first x data for non-number data
        y: [9.18.70.75.56.35]}]; DataJSON = [dataJSON = [// Data data number Indicates the type of data
        {
            x: this.sortFn([10.30.35.39.45.28]),//sortFn is the encapsulated sort method
            y: [69.28.70.65.76.65] {},x: this.sortFn([5.23.45.39.50.28]),
            y: [9.18.70.75.56.35]}];Copy the code
2. Bar block (histogram 2D, pseudo 3D)

Pseudo 3D version parameter example:

let grid = {
    top: (10 * elem.height) / 100.// 12% of the canvas tag height (relative to the total height)
    bottom: ((100 - 18) * elem.height) / 100.left: (12 * elem.width) / 100.// Percentage of distance to the left (12% total width)
    right: ((100 - 8) * elem.width) / 100
},
lineColor = "# 999".//x,y axis color
fillColor = "# 333".//x,y number
lineWidth = 1,
yAxis = {
    textSize: 10.// Scale number fontSize
    maxNumber: 80.// The maximum value of segments
    splitNumber: 5.// Divide into several sections
    splitLen: 5./ / shaft on the left side of the horizontal - |
    marginSplit: 5 / / calibration distance between text and "|"
},
xAxis = {
    textSize: 10.// Scale number fontSize
    maxNumber: 50.splitNumber: 5.splitLen: 5.marginSplit: 3
},
barMargin = 5.// Columns are spaced apart
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 of the line
    dash: 3 // Whether dotted line 0 solid line 1 and above dotted line
},
{
    faceStyle: [{//
		fillColor: "#4ed837".strokeColor: "#ccc"
	}, {
		fillColor: "#03a9f4".strokeColor: "#ccc"}].fillColor: "#03a9f4".strokeColor: "#ccc".color: "#03a9f4".lineWidth: 1.// use ctx.setlineWidth (1)
	barWidth: 18.// Bar column width
	dash: 0 // Whether dotted line 0 solid line 1 and above dotted line
}],
xData = ["Chu and Han contended for hegemony."."Qin"."South Korea"."Wei"."Zhao"],
dataJSON = [ // Data object
{
	y: [69.28.70.65.76] {},y: [9.18.50.75.56]}];Copy the code
3. Pie

Parameter examples:

let radius = {
    outside: {/ / the outside circle
        x: (50 * elem.width) / 100.// Elem is the Canvas DOM, 50/100 is 1/2 of the total width, 50% percentage
        y: (50 * elem.height) / 100.//50% of the height of the element is the y coordinate of the center of the circle
        r: (43 * elem.height) / 100//43% of the height of the element as the radius
    },
    inside: {/ / the inside circle
        r: 50 / 100// The percentage of the outer circle
    } 
},
    colorRadius = ["# 999"."#34ED56"."# 555"].// set sector 1,2,3 colors
    arcWidth = 1.// Round border line width
    radiusOutStyle = { // Ring outer circle style
        fillColor: "# 666".// The shape color corresponds to setFillColor
        strokeColor: "# 999"// The line color corresponds to setStrokeColor
    },
    radiusInStyle = { // Ring inner circle style
        fillColor: "#f8f8f8".strokeColor: "# 999"
    },
    dataJSON = [30.80.180]; //colorRadius Number of json data
Copy the code
4. The 2021-4-26 map map

Parameter examples:

import map from "@/static/map.js"
mapCenter: {// The default position of the central point of the map region is the latitude and longitude of the plate central point of Jiangxi Province
    lng: 116./ / longitude
    lat: 27.25/ / latitude
},
colorStyleMap: {// Style parameters map map 2021-4-26
	strokeColor: {default: "#8f8f8f".// Default style
		isTouch: "# 258429".//touch selects the style
	},
textColor: "# 333".// Text style
fillColor: {default: "#efefef".isTouch: "#4CD964",}},Map component parameter 2021-4-26
max: 28.// Map Component parameter 2021-4-26
pointArr: [].// All map coordinates array, map map component parameter 2021-4-26
colorMapIndex: null.//map Map component parameter 2021-4-26
mapIndex: 0.//map Map component parameter 2021-4-26
geoJsonData: map,// Amap API data (download to js local /static/map.js) map component parameter 2021-4-26
Copy the code

Other water sphere, water column, ring, parameter details view the source function example. Updated the lineDraw line X axis character type rendering method.

/pages/topo/topo