Introduction to the Visualization Panel
In response to the current trend of data visualization, more and more companies need to use it in many scenarios (marketing data, production data, user data), and visualize the chart to display and reflect the data, making the data more intuitive and the data features more prominent.
01- Use technology
Completing this project requires knowledge of:
- div + css layout
- flex layout
- Less
- Native js + jquery use
- rem adaptation
- echarts basics
09-Echarts-Introduction
Common data visualization libraries:
- D3.js is currently the highest rated Javascript visualization tool library on the Web (difficult to get started)
- ECharts.js An open source Javascript data visualization library produced by Baidu
- Highcharts.js Foreign front-end data visualization library, non-commercial free, used by many large foreign companies
- AntV Ant Financial's new generation of data visualization solutions, etc.
- Highcharts and Echarts are like Office and WPS
ECharts, an open-source visual library implemented by JavaScript, can run smoothly on PC and mobile devices, is compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.), and the underlying layer relies on vector graphics library ZRender , which provides intuitive, interactive and highly customizable data visualization charts.
Big vernacular:
- is a JS plugin
- Good performance can run smoothly on PC and mobile devices
- Compatible with major browsers
- Many common charts are provided and can be customized.
Official website address: https://www.echartsjs.com/zh/index.html
10-Echarts-Experience
Official tutorial: [Get started with ECharts in 5 minutes](https://www.echartsjs.com/zh/tutorial.html#Get started with ECharts in 5 minutes)
- Download echarts https://github.com/apache/incubator-echarts/tree/4.5.0
Steps for usage:
- Introduce the echarts plugin file into the html page
- Prepare a sized DOM container
<div id="main" style="width: 600px;height:400px;"></div>
- Initialize the echarts instance object
var myChart = echarts.init(document.getElementById('main'));
- Specify configuration items and data (option)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
- Set the configuration item to the echarts instance object
myChart.setOption(option);
11-Echarts-Basic Configuration
This is to require students to know what the main function of each module of the following configuration is.
The main configuration to know: series xAxis yAxis grid tooltip title legend color
-
series
- Series list. Each series determines its own chart type by type
- Big vernacular: icon data, specifying what type of icon, can overlap multiple charts.
-
xAxis: the x-axis in the Cartesian coordinate system grid
- boundaryGap: The white space strategy on both sides of the coordinate axis is true. At this time, the scale is only used as a separation line, and the labels and data points will be in the middle of the band between the two scales.
-
yAxis: the y-axis in the Cartesian coordinate system grid
-
grid: Drawing grid in Cartesian coordinates.
-
title: title component
-
tooltip: Tooltip component
-
legend: legend component
-
color: list of palette colors
Data is stacked. After the series on the same category axis are configured with the same stack value, the value of the next series will be added to the value of the previous series.
option = {
// color sets the color of our lines Note that there is an array behind
color: ['pink', 'red', 'green', 'skyblue'],
// Set the title of the chart
title: {
text: 'Line Chart Stacking 123'
},
// Tooltip component for charts
tooltip: {
// Trigger method
trigger: 'axis'
},
// legend component
legend: {
// If there is a name value in the series, the data in the legend can be deleted.
},
// Grid configuration grid can control the size of line chart, column chart and chart
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// Whether to show tick labels if true, show otherwise
containLabel: true
},
// Toolbox components can be saved as pictures and other functions
toolbox: {
feature: {
saveAsImage: {}
}
},
// Set the relevant configuration of the x-axis
xAxis: {
type: 'category',//Category
// Whether to let our lines and axes have gaps
boundaryGap: false,
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
},
// Set the relevant configuration of the y-axis
yAxis: {
type: 'value'//data
},
// Series chart configuration It determines which type of chart is displayed
series: [
{
name: 'email marketing',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'affiliate advertising',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'video ad',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'direct interview',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
12- Histogram chart (two steps)
- Find similar instances on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to your needs
- Introduce into html page
// Histogram 1 Module
(function() {
// instantiated object
let myChart = echarts.init(document.querySelector(".bar .chart"));
// Specify configuration and data
let option = {
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
// Coordinate axis indicator, the axis trigger is valid
type: "shadow" // Default is straight line, optional: 'line' | 'shadow'
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "direct interview",
type: "bar",
barWidth: "60%",
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
// assign configuration to instance object
myChart.setOption(option);
})();
-
Customized on demand
-
Modify chart column color #2f89cf
-
Modify the chart size top to 10px bottom to 4% grid to determine the size of our bar chart
color: ["#2f89cf"], grid: { left: "0%", top: "10px", right: "0%", bottom: "4%", containLabel: true },- X-axis related settings xAxis
- Text color is set to rgba(255,255,255,.6) Font size is 12px
- The style of the X-axis is not displayed
// Set the x-axis label text style
-
// Text color and size for the x-axis
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
// x-axis style is not displayed
axisLine: {
show: false
// If you want to set individual line styles
// lineStyle: {
// color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
}
}
- Y Shaft related customization
- Text color is set to rgba(255,255,255,.6) font size is 12 px
- Y Change the grid style to 1px rgba(255,255,255,.1) frame
- The color of the divider is modified to 1 pixel rgba(255,255,255,.1)
~~~JavaScript
// y-axis text label style
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
// y-axis bar style
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
}
5232},
// y-axis divider style
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
- Modify the column shape to rounded corners and set the column width in series
series: [
{
name: "direct interview",
type: "bar",
// Modify the column width
barWidth: "35%",
data: [10, 52, 200, 334, 390, 330, 220],
itemStyle: {
// Modify column fillets
barBorderRadius: 5
}
}
]
};
- Change the corresponding data
// Replace the data data in the x-axis data: [ "tourism industry","Education and training", "game industry", "Medical industry", "E-commerce industry", "social industry", "Financial sector" ], // series replacement data data: [200, 300, 300, 900, 1500, 1200, 600]
- Make the chart follow the screen adaptively
window.addEventListener("resize", function() {
myChart.resize();
});
13-Histogram 2 customization
- Find similar instances on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to your needs
Requirement 1: Modify the graphic size grid
// Icon position
grid: {
top: "10%",
left: "22%",
bottom: "10%"
},
Requirement 2: Do not display the x-axis
xAxis: {
show: false
},
Requirement 3: y-axis related customization
- Do not display the y-axis and associated ticks
//don't show y-axis line
axisLine: {
show: false
},
// don't show scale
axisTick: {
show: false
},
- The color of the y-axis text is set to white
axisLabel: {
color: "#fff"
},
Requirement 4: Modify the first set of column related styles (bars)
name: "strip",
// distance between pillars
barCategoryGap: 50,
//column width
barWidth: 10,
// post with rounded corners
itemStyle: {
normal: {
barBorderRadius: 20,
}
},
- Set the percentage display data in the first group of columns
// Text labels on graphs
label: {
normal: {
show: true,
// In-Graph Display
position: "inside",
// text display format
formatter: "{c}%"
}
},
- Set a different color for the first group of columns
// declare array of colors
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. Set a return value function for the color property in itemStyle
itemStyle: {
normal: {
barBorderRadius: 20,
// params is passed in is the column object
console.log(params);
// dataIndex is the index number of the current bar
return myColor[params.dataIndex];
}
},
Requirement 5: Modify the relevant configuration of the second group of columns (frame)
name: "frame",
type: "bar",
barCategoryGap: 50,
barWidth: 15,
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
},
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
Requirement 6: Add a second set of data to the y-axis
yAxis: [
{
type: "category",
data: ["Indonesia", "U.S.", "India", "China", "World Population(Ten thousand)"],
// Do not show lines for y-axis
axisLine: {
show: false
},
// don't show scale
axisTick: {
show: false
},
// Set the text color inside the tick labels to white
axisLabel: {
color: "#fff"
}
},
{
show: true,
data: [702, 350, 610, 793, 664],
// Do not show lines for y-axis
axisLine: {
show: false
},
// don't show scale
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff"
}
}
}
],
Requirement 7: Set up two sets of column stacks and replace data
// Add to the first object of the series yAxisIndex: 0, // Add to the second object of the series yAxisIndex: 1, // The data in the first object of the series data: [70, 34, 60, 78, 69], // The data in the second object of series data: [100, 100, 100, 100, 100], // The y-axis replaces the first object to replace the data data data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"], // The y-axis replaces the second object to replace the data data data:[702, 350, 610, 793, 664],
Full code:
// Histogram 2
(function() {
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 1. Instantiate the object
var myChart = echarts.init(document.querySelector(".bar2 .chart"));
// 2. Specify Configuration and Data
var option = {
grid: {
top: "10%",
left: "22%",
bottom: "10%"
// containLabel: true
},
// Do not display information about the x-axis
xAxis: {
show: false
},
yAxis: [
{
type: "category",
inverse: true,
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
// Do not show lines for y-axis
axisLine: {
show: false
},
// don't show scale
axisTick: {
show: false
},
// Set the text color inside the tick labels to white
axisLabel: {
color: "#fff"
}
},
{
data: [702, 350, 610, 793, 664],
inverse: true,
// Do not show lines for y-axis
axisLine: {
show: false
},
// don't show scale
axisTick: {
show: false
},
// Set the text color inside the tick labels to white
axisLabel: {
color: "#fff"
}
}
],
series: [
{
name: "strip",
type: "bar",
data: [70, 34, 60, 78, 69],
yAxisIndex: 0,
// Modify the fillet of the first group of columns
itemStyle: {
barBorderRadius: 20,
// The color at this time can modify the color of the column
color: function(params) {
// params is passed in is the column object
console.log(params);
// dataIndex is the index number of the current bar
return myColor[params.dataIndex];
}
},
// distance between pillars
barCategoryGap: 50,
//column width
barWidth: 10,
// Display the text inside the column
label: {
show: true,
position: "inside",
// {c} will be automatically parsed into the data in the data data
formatter: "{c}%"
}
},
{
name: "frame",
type: "bar",
barCategoryGap: 50,
barWidth: 15,
yAxisIndex: 1,
data: [100, 100, 100, 100, 100],
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
}
}
]
};
// 3. Assign the configuration to the instance object
myChart.setOption(option);
})();
14-Line chart 1 Production of personnel change module
- Find similar instances on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to your needs
Requirement 1: Modify the size of the line chart, display the border setting color: #012f4a, and display the tick labels.
// set grid style
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
show: true,// show border
borderColor: '#012f4a', // border color
containLabel: true // Include tick text
},
Requirement 2: Modify the text color in the legend component #4c9bfd, the distance from the right to the right is 10%
// legend component
legend: {
textStyle: {
color: '#4c9bfd' // legend text color
},
right: '10%' // 10% from the right
},
Requirement 3: x-axis related configuration
- Scale removal
- x-axis tick label font color: #4c9bfd
- cull the x-axis color (use the Y-axis divider in the future)
- Both ends of the shaft do not need the inner spacing boundaryGap
xAxis: {
type: 'category',
data: ["on Monday", "Tuesday"],
axisTick: {
show: false // remove tick marks
},
axisLabel: {
color: '#4c9bfd' // text color
},
axisLine: {
show: false // remove axis
},
boundaryGap: false // remove inter-axis spacing
},
Requirement 4: Customization of the y-axis
- Scale removal
- Font color: #4c9bfd
- Dividing line color: #012f4a
yAxis: {
type: 'value',
axisTick: {
show: false // remove scale
},
axisLabel: {
color: '#4c9bfd' // text color
},
splitLine: {
lineStyle: {
color: '#012f4a' // color of dividing line
}
}
},
Requirement 5: Two line graph customization
- Colors: #00f2f1 #ed3f35
- Modify the polyline to be smooth and add smooth to true in the series data
color: ['#00f2f1', '#ed3f35'],
series: [{
name:'Add followers',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
// Polyline modified to be smooth
smooth: true,
},{
name:'new visitor',
data: [100, 331, 200, 123, 233, 543, 400],
type: 'line',
smooth: true,
}]
Requirement 6: Configuration Data
// x-axis text
xAxis: {
type: 'category',
data: ['1 moon', '2 moon', '3 moon', '4 moon', '5 moon', '6 moon', '7 moon', '8 moon', '9 moon', '10 moon', '11 moon', '12 moon'],
// Icon data
series: [{
name:'Add followers',
data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
type: 'line',
smooth: true
},{
name:'new visitor',
data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
type: 'line',
smooth: true
}
}]
Requirement 7: New requirement Click 2020 2021 Data changes
The following is the data sent from the background (ajax request)
var yearData = [
{
year: '2020', // years
data: [ // The two arrays are because there are two lines
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
]
},
{
year: '2021', // years
data: [ // The two arrays are because there are two lines
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
]
}
];
- tab bar switching event
- Click the 2020 button, you need to replace the data in the first object of the series with data[0] in the 2020 object
- Click the 2020 button, you need to replace the data in the second object of the series with data[1] in the 2020 object
- The 2021 button does the same
Full code:
// Line chart 1 module production
(function() {
var yearData = [
{
year: "2020", // years
data: [
// The two arrays are because there are two lines
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
]
},
{
year: "2021", // years
data: [
// The two arrays are because there are two lines
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
]
}
];
// 1. Instantiate the object
var myChart = echarts.init(document.querySelector(".line .chart"));
// 2. Specify the configuration
var option = {
// Modify the color of the two lines through this color
color: ["#00f2f1", "#ed3f35"],
tooltip: {
trigger: "axis"
},
legend: {
// If the series object has a name value, the legend can not write data
// Modify the legend component text color
textStyle: {
color: "#4c9bfd"
},
// This 10% must be quoted
right: "10%"
},
grid: {
top: "20%",
left: "3%",
right: "4%",
bottom: "3%",
show: true, // show border
borderColor: "#012f4a", // border color
containLabel: true // Include tick text
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"1 moon",
"2 moon",
"3 moon",
"4 moon",
"5 moon",
"6 moon",
"7 moon",
"8 moon",
"9 moon",
"10 moon",
"11 moon",
"12 moon"
],
axisTick: {
show: false // remove tick marks
},
axisLabel: {
color: "#4c9bfd" // text color
},
axisLine: {
show: false // remove axis
}
},
yAxis: {
type: "value",
axisTick: {
show: false // remove tick marks
},
axisLabel: {
color: "#4c9bfd" // text color
},
axisLine: {
show: false // remove axis
},
splitLine: {
lineStyle: {
color: "#012f4a" // color of dividing line
}
}
},
series: [
{
name: "Add followers",
type: "line",
// true can make our polyline display with radians
smooth: true,
data: yearData[0].data[0]
},
{
name: "new visitor",
type: "line",
smooth: true,
data: yearData[0].data[1]
}
]
};
// 3. Assign the configuration to the instance object
myChart.setOption(option);
// 4. Let the chart automatically adapt to the screen
window.addEventListener("resize", function() {
myChart.resize();
});
// 5. Click to switch effect
$(".line h2").on("click", "a", function() {
// alert(1);
// console.log($(this).index());
// After clicking a, find the relevant object of the corresponding yearData according to the index number of the current a
// console.log(yearData[$(this).index()]);
var obj = yearData[$(this).index()];
option.series[0].data = obj.data[0];
option.series[1].data = obj.data[1];
// needs to be re-rendered
myChart.setOption(option);
});
})();
15-line chart 2 Play volume module production
- Find similar instances on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to your needs
Requirement 1: Change the text color of the legend component rgba(255,255,255,.5) The text size is 12
legend: {
top: "0%",
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
Requirement 2: Modify the chart size
grid: {
left: "10",
top: "30",
right: "10",
bottom: "10",
containLabel: true
},
Requirement 3: Modify the x-axis related configuration
- Modify the text color to rgba(255,255,255,.6) and the text size to 12
- The color of the x-axis is rgba(255,255,255,.2)
// Text color is rgba(255,255,255,.6) Text size is 12
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
// The color of the x-axis is rgba(255,255,255,.2)
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)"
}
},
Requirement 4: Modify the relevant configuration of the y-axis
axisTick: { show: false },
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
// Change the color of the dividing line
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
Requirement 5: Modify the configuration of the two line modules (note that it is customized in the series)
//The first line is smooth
smooth: true,
// Modify the style of lines individually
lineStyle: {
color: "#0184d5",
width: 2
},
// fill area
areaStyle: {
// Gradient color, just need to copy
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(1, 132, 213, 0.4)" // The starting color of the gradient
},
{
offset: 0.8,
color: "rgba(1, 132, 213, 0.1)" // The end color of the gradient line
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
},
// set inflection point
symbol: "circle",
// Inflection point size
symbolSize: 8,
// Set inflection point color and border
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
// The inflection point is not displayed at the beginning, and the mouse passes through the display
showSymbol: false,
name: "Forwarding volume",
type: "line",
smooth: true,
lineStyle: {
normal: {
color: "#00d887",
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0, 216, 135, 0.4)"
},
{
offset: 0.8,
color: "rgba(0, 216, 135, 0.1)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
// set inflection point
symbol: "circle",
// Inflection point size
symbolSize: 5,
// Set inflection point color and border
itemStyle: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
// The inflection point is not displayed at the beginning, and the mouse passes through the display
showSymbol: false,
Requirement 6: Replacement data
// x-axis replacement data data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"], // series first object data data data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40], // series second object data data data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],
16-pie chart 1 age distribution module production
- Find similar instances on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to your needs
Custom Chart Requirements 1:
- Modify the legend component to appear at the bottom and center.
- Modify the width and height of each small icon to 10px
- Text size is 12 colors rgba(255,255,255,.5)
legend: {
// 0% from bottom
bottom: "0%",
// Small icon width and height
itemWidth: 10,
itemHeight: 10,
data: ['direct interview', 'email marketing', 'affiliate advertising', 'video ad', 'search engine'],
// Modify the text of the legend component to 12px
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
Custom Requirement 2:
- Modify Horizontal Center Vertical Center
- Modify the radius of the inner circle and the radius of the outer circle to ["40%", "60%"] teacher Pink's friendly prompt: for example, the line chart and the bar chart with the rectangular coordinate system are grid to modify the graph size, while our pie chart is modified by radius Modify size
series: [
{
name: "age distribution",
type: "pie",
// Set the position of the pie chart in the container
center: ["50%", "50%"],
// Modify the inner circle radius and outer circle radius as percentages relative to the container width
radius: ["40%", "60%"],
// Don't show label text
label: { show: false },
// Do not show connecting lines
labelLine: { show: false },
}
]
Customization Requirement 3: Replacing Data
// data in legend can be omitted
data: ["0 under the age of", "20-29 age", "30-39 age", "40-49 age", "50 over the age of"],
// data in series
data: [
{ value: 1, name: "0 under the age of" },
{ value: 4, name: "20-29 age" },
{ value: 2, name: "30-39 age" },
{ value: 2, name: "40-49 age" },
{ value: 1, name: "50 over the age of" }
] ,
Customization Requirement 4: Change Color
color: [
"#065aab",
"#066eab",
"#0682ab",
"#0696ab",
"#06a0ab",
],
// 4. Let the chart automatically adapt to the screen
window.addEventListener("resize", function() {
myChart.resize();
});
17-Pie Chart 2 Regional Distribution Module Production (Nightingale Rose Chart)
- Find similar instances on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to your needs
Step 2: Customize according to your needs
- Requirement 1: Color Settings
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
- Requirement 2: Modify the size of the pie chart (series object)
radius: ['10%', '70%'],
- Requirement 3: Change the display mode of the pie chart to the radius mode
roseType: "radius",
- Requirement 4: Data usage replacement (the data object in the series object)
{ value: 20, name: 'Yunnan' },
{ value: 26, name: 'Beijing' },
{ value: 24, name: 'Shandong' },
{ value: 25, name: 'Hebei' },
{ value: 20, name: 'Jiangsu' },
{ value: 25, name: 'Zhejiang' },
{ value: 30, name: 'Sichuan' },
{ value: 42, name: 'Hubei' }
-
Requirement 5: The font is slightly smaller by 10 px (set in the series object)
The text labels on the pie chart can control some styles of the text of the pie chart. label object settings
series: [
{
name: "Area mode",
type: "pie",
radius: [30, 110],
center: ["50%", "50%"],
roseType: "radius",
// The text label controls the relative style of the pie chart text, note that it is an object
label: {
fontSize: 10
},
}
]
};
- Requirement 6: Prevent the guide line from being too long when scaling. The guide line is slightly shorter (the labelLine object setting in the series object)
- Connection Chart 6 px
- Link text 8 px
+ // text adjustment
+ label:{
+ fontSize: 10
+ },
+ // Guide line adjustment
+ labelLine: {
+ // Connecting Fan Chart Line Length
+ length: 6,
+ // connecting text line length
+ length2: 8
+ }
+ }
+ ],
- Requirement 6: When the browser zooms, the chart automatically adapts.
// Listen to the browser zoom, the chart object calls the zoom resize function
window.addEventListener("resize", function() {
myChart.resize();
});
18-Echarts-Community Introduction
Community Just a place for active echart users to communicate and contribute custom charts.
[External link image transfer failed, the source site may have an anti-leech mechanism, it is recommended to save the image and upload it directly (img-EG620buS-1661953765077)(docs/media/1576664444951.png)]
- Here you can find some highly customized charts based on echarts, which are equivalent to plug-ins developed based on jquery, and here are third-party charts developed based on echarts.
19-Echarts-map usage (extension)
Reference community example: https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (simulated aircraft route)
Implementation steps:
- First, you need to download china.js to provide the js file of China map
- The second is because there is a lot of code in it, we create a new js file myMap.js to introduce
- Just use the configuration provided by the community.
Need to modify:
- remove title component
- remove background color
- Modify the background of the map province #142957 areaColor Make changes in it
- The map can be enlarged by setting the zoom to 1.2
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#142957',
borderColor: '#0692a4'
},
emphasis: {
areaColor: '#0b1c2d'
}
}
},
Summary: This example is an extended case, you can look at more cases in the community in the future.
20- Final constraint scaling
/* Constrain screen size */
@media screen and (max-width: 1024px) {
html {
font-size: 42px !important;
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important;
}
}