<!--
1. First, you need to download the package echarts.js, and then import the package
-->
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!--Introduce ECharts file-->
<script src="echarts.js"></script>
</header>
<!--
2. Basic configuration
//The first step is to call the echarts initialization function, pass in the dom object to generate the instance of echarts
-->
<body>
<!--Prepare a DOM with size (width and height) for ECharts-->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// Based on the prepared dom, initialize the echarts instance
var myChart = echarts.init(document.getElementById('main'));
//The second step constructs the data
var data1 = [];//data area scaling component
var data2 = [];
var data3 = [];
//construct random number
var random = function (max){
return (Math.random() * max).toFixed(3);
};
//load data into array
for (var i = 0; i < 500; i++) {
data1.push([random(15), random(10), random(1)]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
};
//3, configure the option item
//The third step is to use the option of echarts to configure the parameters
option = {
animation: false,//Whether to enable animation, the default is enabled, true is enabled, false is disabled
//legend
legend: {
data: [
{
name:'scatter2',
icon:'circle',//Forcibly set the graphic rectangle
textStyle:
{color:'red'}//Set the text to red
},
{
name:'scatter',
icon:'rectangular',//force the graphics to be rectangular
textStyle:
{color:'red'}//Set the text to red
},
{
name:'scatter3',
icon:'rectangular',//force the graphics to be rectangular
textStyle:
{color:'red'}//Set the text to red
}
],
zlevel: 5, //Set Canvas layered with different zlevel values and will be placed in different animation effects. Legend has it that graphics with a small z value will be covered by graphics with a large z value
z: 3, //z level is lower than zlevel, the legend says that the smaller z value will be overwritten by the larger z value, but the Canvas will not be recreated
left:'center',//The distance between the legend component and the left side of the container. Can be a percentage relative to the height and width of the container like '20%', or 'left', 'center', 'right'.
//If the value of left is 'left', 'center', 'right', the component will be automatically aligned according to the corresponding position.
top:'top',
//rigth:'',
//bottom:''
width:'auto',//Set the width of the legend component, the default value is auto, it seems that only px can be used
orient:'horizontal',//Set the orientation of the legend component. The default is horizontal horizontal layout, 'vertical' vertical layout
align:'auto',//'left' 'right' sets the alignment of the legend mark and the text, the default is auto
//Automatic by default, determined by the position and orient of the component, when the left value of the component is 'right' and the vertical layout (orient is //'vertical'), it is right-aligned, and it is 'right'.
padding:[20,20,20,20],//Set the inner margin of the legend to be 5 by default, and accept arrays to set respectively
itemGap: 20,//The interval between each item of the legend, the horizontal interval in the horizontal layout, and the vertical interval in the vertical layout. Default is 10
itemWidth: 30, //The graphic width of the legend mark, the default is 25
itemHeight:20,//The graphic height of the legend mark, the default is 14
//formatter:'Legend {name}'//The content formatter of the legend text, which supports two forms of string template and callback function.
formatter:function(name){
return 'Legend '+name;
},
//selectedMode: false, //The selection mode of the legend is enabled by default, and can also be set to single or multiple
//selectedMode:'single'//The selection mode of the legend is enabled by default, and can also be set to single or multiple
selectedMode:'multiple',//The selection mode of the legend, the default is on, and it can also be set to single or multiple
inactiveColor:'#ccc',//The color when the legend is closed, the default is '#ccc'
selected:{
'scatter2':true,//Set the selected state of the legend
'scatter':false,
'scatter3':false
},
tooltip: {//The tooltip configuration of the legend is not displayed by default, you can open the tooltip to cut the text when there are many files
show: true
},
//backgroundColor:'rgb(128, 128, 128)',//The background color of the legend, the default is transparent
//borderColor:'rgb(10, 150, 200)',//The border color of the legend
//borderWidth:2,//The border line width of the graph column, the default is 1
shadowBlur: 30, //The blurred size of the legend shadow
shadowColor:'rgb(128, 128, 56)'//The color of the shadow
},
//Hint when the mouse moves up
tooltip: {
},
//grid
grid:{
show:true,//whether to display the grid of the rectangular coordinate system, true to display, false not to display
left: 100, // the distance between the grid component and the left side of the container
containLabel: false, //whether the grid area contains the scale label of the coordinate axis. If the width of the axis label cannot be determined, and the container is too small to reserve more space, it can be set to true to prevent the label from overflowing the container.
},
//X axis
xAxis: {
type: 'value',
min: 'dataMin',
name:'xAxis', //The name of the x-axis
nameLocation:'end', //The display position of the x-axis name is 'middle','end'
nameRotate: 30,//Coordinate axis name rotation angle value
max: 'dataMax',
gridIndex: 0, // the index of the grid where the x-axis is located, the default is the first grid
//offset: 10, //The offset of the x-axis relative to the default position is meaningful when a grid contains multiple grids
type:'value',//The value axis is suitable for continuous data
//'category' category axis is suitable for discrete category data, and category data must be set through data for this type.
//'time' //The time axis is suitable for continuous time series data. Compared with the value axis, the time axis has time formatting, and the calculation of the scale is also different. For example, the month will be determined according to the range of the span. Day of the week, day or scale in the hour range.
//'log' logarithmic axis. Applies to logarithmic data.
position:'top',//The x-axis is above or below the grid, the default is bottom below
inverse: false, //whether inverse coordinates
boundaryGap:['20%','20%'],//The white space strategy on both sides of the coordinate axis, the setting and performance of the category axis and non-category axis are different.
//The boundaryGap in the category axis can be configured as true and false. The default is true. At this time, the scale is only used as a separator, and the labels and data points will be in the middle of the band between the two scales.
//Non-category axis, including time, value, and logarithmic axis, boundaryGap is an array of two values, which respectively represent the extension range of the minimum and maximum values of the data. You can directly set the value or relative percentage, and set min and max invalid after
splitLine: {
show: true
}
},
//Y axis
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
//Data area zoom, scroll bar
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 29,
end: 36
},
{
type: 'inside',
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'inside',
yAxisIndex: [0],
start: 29,
end: 36
}
],
//visualMap
visualMap: {
//type: 'continuous', //The type is continuous.
min: 0,//Specify the minimum allowed value of the visualMapContinuous component. 'min' must be user-specified. [visualMap.min, visualMax.max] form the "domain" of the visual map.
max: 1000000,//Specify the maximum value allowed by the visualMapContinuous component. 'max' must be user-specified. [visualMap.min, visualMax.max] form the "domain" of the visual map.
//setOption adapts range when changing min and max
text:['High','Low'],//Text at both ends ['High', 'Low']
range:[0, 800000],//Specify the position of the value corresponding to the handle
calculable:true,//Indicates whether the handle for dragging is set, if it is false, the view will be updated only when the dragging ends. If it is true, the chart view will be updated in real time during the process of dragging the handle.
realtime: false, // indicates whether to update in real time when dragging
inverse: false, //whether to flip the component
precision: 2, //The decimal point precision of the expansion
itemWidth:30,//The width of the bar, the default is 20
itemHeight:200,//The height of the bar, the default is 140
align:'left',//position of the handle and text in the component 'auto' (valid when orient is horizontal) 'left' 'right' (valid when orient is vertical.) 'top' 'bottom'
textGap:20,//The distance between the text at both ends and the main body
show:true,//Whether to display the data mapping component
dimension: 0,//Specify "which dimension" of the data to map to the visual element. "Data" is series.data. series.data can be understood as a two-dimensional array,
seriesIndex:0,//Specify which series of data to go to
hoverLink: true,//When the hoverLink function is turned on, when the mouse hovers over the visualMap component, the value corresponding to the mouse position will be highlighted in the corresponding graphic element in the chart.
//Conversely, when the mouse hovers over a graphic element in the chart, a triangle will prompt its corresponding value at the corresponding position of the visualMap component.
//inRange: {//It can define the visual form of the target series (see visualMap-continuous.seriesIndex), and also define the visual style of visualMap-continuous itself.
//visual channel
//InRange, there can be any number of "visual channel" definitions (such as color, symbolSize, etc.). These visual channels will be used simultaneously.
//In general, it is recommended to use opacity instead of colorAlpha (their subtle difference is that the former can also control the transparency of the appendages (such as label) in the primitive, while the latter can only control The transparency of the color of the primitive itself).
//Visual mapping method: supports two methods: linear mapping and table lookup mapping.
//Linear mapping means that each value (dataValue) in series.data will be calculated by linear mapping, from [visualMap.min, visualMap.max] to a certain value in the set [visual value 1, visual value 2] interval A visual value (hereinafter referred to as visual value).
//The lookup table mapping indicates that all values (dataValue) in series.data are enumerable, and the mapping result will be obtained by looking up the table according to the given mapping table.
/*color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]//The size of the primitive. */
// Indicates the visual style of the target series.
//},
/*target: {
inRange: {
symbol: The graphic class of the primitive.
symbolSize: The size of the primitive.
color: The color of the primitive.
colorAlpha: The transparency of the primitive's color.
opacity: The opacity of primitives and their appendages (such as text labels).
colorLightness: The lightness and darkness of the color, see HSL.
colorSaturation: The saturation of the color, see HSL.
colorHue: The hue of the color, see HSL.
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},*/
// Indicates the visual style of visualMap-continuous itself.
/*controller: {inRange outOfRange settings of the controller in the visualMap component. If there is no this controller setting, the controller will use the outer inRange outOfRange setting; if there is this controller setting, it will use this setting. It is suitable for scenarios where some controller visual effects need special customization or adjustment.
inRange: {
symbolSize: [30, 100],
symbol:['circle', 'rect', 'diamond'],
color: ['#121122', 'rgba(3,4,5,0.4)', 'red']
}
},*/
type:'piecewise',//represents a segmented visual map component (visualMapPiecewise)
splitNumber:10,//For continuous data, it is automatically divided into several segments, the default is 5 segments
pieces: [//The scope of each paragraph, as well as the text of each paragraph, and the special style of each paragraph
{min: 1500}, // If max is not specified, it means that max is infinite (Infinity).
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 to 200 (custom label)'},
{value: 123, label: '123 (customized special color)', color: 'grey'}, // Indicates that the value is equal to 123.
{max: 5} // If min is not specified, it means that min is infinite (-Infinity).
],
min:2,//Specify the minimum value of the visualMapPiecewise component.
max:5,//Specify the maximum value of the visualMapPiecewise component.
selectedMode:'multiple', //(multiple choice)(single choice)
inverse: false, //whether to reverse
precision: 2,//Decimal precision of data display
itemWidth: 20, //The width of the graphic, that is, the width of each small block.
itemHeight: 20, //The height of the graphic, that is, the height of each small block
text:['High', 'Low'],//text at both ends
align:'auto', // automatically determined. 'left' Graphics on the left and text on the right. 'right' graphics on the right text on the left.
textGap:20,//The distance between the text body at both ends
itemGap:10,//The distance between every two primitives, the unit is px.
itemSymbol:'circle',//shape of the graphic 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
show:true,//Whether to display the component
dimension: 0,//Specify "which dimension" of the data to map to the visual element.
seriesIndex:0,//Specify which series of data to take, that is, which series' series.data.
hoverLink: true,//When the hoverLink function is turned on, when the mouse hovers over the visualMap component, the value corresponding to the mouse position will be highlighted in the corresponding graphic element in the chart.
//inRange://参考visualMapContinuous
//outOfRange://Reference visualMapContinuous*/
/*categories: [//Used to represent the full set of discrete data (or can be called category data, enumeration data).
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],*/
/*inRange: {
// visual value can be made into Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // Empty string, means that except for 'Warden' and 'Demon Hunter', all correspond to 'green'.
},
// visual value can also only match a single value, indicating that all are mapped to one value, such as:
color: 'green',
// visual value can also be made into an array, this array must be as long as the categories array,
// Each array item has a one-to-one correspondence with the categories array item:
color: ['red', 'black', 'green', 'yellow', 'white']
},*/
/*outOfRange:{//Define the visual elements outside the selected range.
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
olor: ['orangered','yellow','lightskyblue']*/
},
//load data
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter', //scatter plot
itemStyle: {
normal: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}
]
};
// Use the configuration items and data just specified to display the chart
myChart.setOption(option);
</script>
</body>
</html>
The use of echarts data visualization plug-in in the page and the detailed explanation of each parameter
Guess you like
Origin blog.csdn.net/zxj19880502/article/details/129185223
Recommended
Ranking