Echarts commonly used various chart template configurations
Note: This is mainly based on various charts and uses more various configuration items of Echarts;
The following codes can be copied to the Echarts official website and previewed directly;
Icon template directory
- Echarts commonly used various chart template configurations
- 1. Force guide chart
- 2. Donut chart
- 3. K-line chart
- 4. Line chart
- 5. Horizontal bar chart
- 6. Line chart + bar chart
- 7. 3D histogram
- 8. Engineering project visualization
- 9. Radar chart
- 10. Pictogram column chart
- 11. Ring proportion chart
- 12. Circle animation
- 13. Map
- 14. Map json free download
1. Force guide diagram
option = {<!-- -->
title: {<!-- -->
text: 'Knowledge Graph'
},
series: [
{<!-- -->
type: 'graph',
layout: 'force',
symbolSize: 58,
draggable: true,
roam: true,
focusNodeAdjacency: true,
categories: [
{<!-- -->
name: 'company',
itemStyle: {<!-- -->
color: '#006acc'
}
},
{<!-- -->
name: 'Director',
itemStyle: {<!-- -->
color: '#ff7d18'
}
}
],
edgeSymbolSize: [10, 10],
edgeSymbol: ['circle', 'arrow'],
edgeLabel: {<!-- -->
normal: {<!-- -->
show: true,
textStyle: {<!-- -->
fontSize: 20
},
formatter(x) {<!-- -->
return x.data.name;
}
}
},
label: {<!-- -->
show: true,
formatter(param) {<!-- -->
if (param.name == 'Browser Ltd') {<!-- -->
return 'custom name';
} else {<!-- -->
return param.name;
}
}
},
force: {<!-- -->
repulsion: 2000,
edgeLength: 120
},
data: [
{<!-- -->
name: 'Operating System Group',
category: 0,
symbolSize: 80,
itemStyle: {<!-- -->
color: '#006acc',
normal: {<!-- -->
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7'
}
}
},
{<!-- -->
name: 'Browser Ltd',
category: 0,
symbolSize: 80,
itemStyle: {<!-- -->
normal: {<!-- -->
color: '#49CCFF88',
borderColor: '#49CCFF',
borderWidth: 2,
shadowBlur: 10,
shadowColor: '#49CCFF'
}
},
label: {<!-- -->
textStyle: {<!-- -->
color: '#000'
}
}
},
{<!-- -->
name: 'HTML Technology',
category: 0,
symbolSize: 80,
itemStyle: {<!-- -->
color: '#006acc',
normal: {<!-- -->
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7'
}
}
},
{<!-- -->
name: 'JavaScript Technology',
category: 0,
symbolSize: 80,
itemStyle: {<!-- -->
color: '#006acc',
normal: {<!-- -->
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7'
}
}
},
{<!-- -->
name: 'CSS Technology',
category: 0,
symbolSize: 80,
itemStyle: {<!-- -->
color: '#006acc',
normal: {<!-- -->
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7'
}
}
},
{<!-- -->
name: 'Chrome',
category: 1,
itemStyle: {<!-- -->
color: '#ff7d18',
normal: {<!-- -->
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7'
}
}
},
{<!-- -->
name: 'IE',
category: 1,
itemStyle: {<!-- -->
color: '#ff7d18',
normal: {<!-- -->
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7'
}
}
},
{<!-- -->
name: 'Firefox',
category: 1,
itemStyle: {<!-- -->
color: '#ff7d18',
normal: {<!-- -->
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7'
}
}
},
{<!-- -->
name: 'Safari',
category: 1,
itemStyle: {<!-- -->
color: '#ff7d18',
normal: {<!-- -->
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7'
}
}
}
],
links: [
{<!-- -->
source: 'Browser Ltd',
target: 'Operating System Group',
name: 'Share participation',
label: {<!-- -->
align: 'center',
fontSize: 12
},
lineStyle: {<!-- -->
color: '#ff7d18'
}
},
{<!-- -->
source: 'HTML Technology',
target: 'Browser Ltd',
name: 'Share participation',
label: {<!-- -->
align: 'center',
fontSize: 12
},
lineStyle: {<!-- -->
color: '#ff7d18'
}
},
{<!-- -->
source: 'CSS Technology',
target: 'Browser Ltd',
name: 'Share participation',
label: {<!-- -->
align: 'center',
fontSize: 12
},
lineStyle: {<!-- -->
color: '#ff7d18'
}
},
{<!-- -->
source: 'JavaScript Technology',
target: 'Browser Ltd',
name: 'Share participation',
label: {<!-- -->
align: 'center',
fontSize: 12
},
lineStyle: {<!-- -->
color: '#ff7d18'
}
},
{<!-- -->
source: 'Chrome',
target: 'Browser Ltd',
name: 'Director',
label: {<!-- -->
align: 'center',
fontSize: 12
},
lineStyle: {<!-- -->
color: '#006acc'
}
},
{<!-- -->
source: 'IE',
target: 'Browser Ltd',
name: 'Director',
label: {<!-- -->
align: 'center',
fontSize: 12
},
lineStyle: {<!-- -->
color: '#006acc'
}
},
{<!-- -->
source: 'Firefox',
target: 'Browser Ltd',
name: 'Director',
label: {<!-- -->
align: 'center',
fontSize: 12
},
lineStyle: {<!-- -->
color: '#006acc'
}
},
{<!-- -->
source: 'Safari',
target: 'Browser Ltd',
name: 'Director',
label: {<!-- -->
align: 'center',
fontSize: 12
},
lineStyle: {<!-- -->
color: '#006acc'
}
},
{<!-- -->
source: 'Chrome',
target: 'JavaScript Technology',
name: 'legal person',
label: {<!-- -->
align: 'center',
fontSize: 12
},
lineStyle: {<!-- -->
color: '#10a050'
}
}
]
}
]
};
2. Donut chart
echarts ring chart: multi-layer nesting, custom legend position and color, insert data and text in the middle, color gradient;
Text link: https://blog.csdn.net/aibujin/article/details/124796709?spm=1001.2014.3001.5501
3. K-line chart
Article link: https://blog.csdn.net/aibujin/article/details/124797924?spm=1001.2014.3001.5501
4. Line chart
echarts line chart, horizontal and vertical axis color, text color, grid lines, white space on both sides of the coordinate axis, data gradient, tick marks, etc.;
Article link: https://blog.csdn.net/aibujin/article/details/124802512?spm=1001.2014.3001.5501
Article link: https://blog.csdn.net/aibujin/article/details/130157140?spm=1001.2014.3001.5501
Article link: https://blog.csdn.net/aibujin/article/details/130223130?spm=1001.2014.3001.5501
5. Horizontal bar chart
echarts horizontal histogram, coordinate axis hiding, grid line color gradient, grid default background, histogram border width/color, data gradient, tick mark hiding, etc.;
Article link: https://blog.csdn.net/aibujin/article/details/124802889?spm=1001.2014.3001.5501
6. Line chart + bar chart
echarts line chart + bar chart, y-axis on the left and right sides, horizontal and vertical axis color, text color, grid lines, blank space on both sides of the coordinate axis, data gradient, tick marks, etc.;
Article link: https://blog.csdn.net/aibujin/article/details/124803493?spm=1001.2014.3001.5501
7. 3D Histogram
echarts 3D histogram, overlay of multiple histograms, tick marks in the y-axis, hidden abscissa, text color, grid lines, white space on both sides of the coordinate axis, data gradient, tick marks, etc.;
Article link: https://blog.csdn.net/aibujin/article/details/124879825?spm=1001.2014.3001.5501
8. Engineering project visualization
echarts engineering project visualization, based on the x-axis time coordinate axis, overlays and displays project nodes in different stages, the y-axis displays the project stage name, text color, grid lines, white space on both sides of the coordinate axis, background color, etc.;
Article link: https://blog.csdn.net/aibujin/article/details/130237643?spm=1001.2014.3001.5501
9. Radar chart
echarts radar chart, custom indicator name, line style, area fill style, polyline inflection point mark, custom name style, coordinate axis separator line, white space on both sides of the coordinate axis, background color, etc.;
Article link: https://blog.csdn.net/aibujin/article/details/130266382?spm=1001.2014.3001.5501
10. Pictogram
echarts pictogram column chart, hides the horizontal and vertical coordinate axes and grid lines, leaves both sides of the coordinate axis blank, customizes vector graphics, text prompt boxes, graphic types, background colors, etc.;
Article link: https://blog.csdn.net/aibujin/article/details/130289101?spm=1001.2014.3001.5501
11. Ring proportion chart
echarts ring proportion chart, ring chart, dashboard, tick marks, custom prompt box, color gradient, background color, etc.;
Article link: https://blog.csdn.net/aibujin/article/details/130265744?spm=1001.2014.3001.5501
Twelve, ring animation
echarts ring animation, pie chart, donut chart, chart animation, grid lines, color gradient, chart line vector, text prompt box, chart level, background color, etc.;
Article link: https://blog.csdn.net/aibujin/article/details/130288849?spm=1001.2014.3001.5501
13. Map
echarts map, custom prompt box;
Article link: https://blog.csdn.net/aibujin/article/details/130532911?spm=1001.2014.3001.5501
14. Map json free download
-
json download of the whole province: https://mp.csdn.net/mp_download/manage/download/UpDetailed?spm=3001.5299
-
Alibaba data visualization platform download: http://datav.aliyun.com/portal/school/atlas/area_selector
3. https://geojson.cn/