Echarts uses summaries
A histogram
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); let options = { xAxis:{ type:'category', data:['red','yellow','pink'], }, yAxis:{ type:'value', }, Series :[{name:' English ', type:'bar', data:[70,80,66]}]} myCharts. SetOption (options);Copy the codeBar chart Maximum value minimum value average value
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let option = {xAxis: {type: 'category' data: [' zhang ', 'bill', 'Cathy', 'the horse 6', 'xiao Ming', 'the girl', 'big strong'],}, yAxis: {type: 'value'}, Series: [{name: 'Chinese', type: 'bar' + markPoint: {+ data: [{type: 'Max' name: 'maximum,}, {type: "min", name:' minimum '}]}. MarkLine :{data:[{type:'average', name:' average',}]}, data:[88,92,63,77,94,80,72,]}]} myCharts. SetOption (option);Copy the code
Bar chart column width display Settings
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let option = {xAxis: {type: 'category' data: [' zhang ', 'bill', 'Cathy', 'the horse 6', 'xiao Ming', 'the girl', 'big strong'],}, yAxis: {type: 'value'}, Series :[{name:' text ', type:'bar', label:{show:true, position:'top',}, barWidth:'40%', Data :[88,92,63,77,94,80,72,]}]} myCharts. SetOption (option);Copy the code
General Configuration Title
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let option = {title:{text:' display ', textStyle:{color:'pink',}, borderWidth:2, borderColor:'blue', borderRadius:5, Left: '50%'}, xAxis: {type: 'category' data: [' zhang ', 'bill', 'Cathy', 'six horses',' xiao Ming ', 'the girl', 'big strong'],}, yAxis: {type: 'value'}, Series :[{name:' text ', type:'bar', label:{show:true, position:'top',}, barWidth:'40%', Data :[88,92,63,77,94,80,72,]}]} myCharts. SetOption (option);Copy the code
Tooltip common configuration trigger type triggerOn formatter
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); let option = { tooltip:{ // trigger:'item', trigger:'item', // triggerOn:'click', Formatter :(args) => {return '${args. SeriesName}'; }}, xAxis: {type: 'category' data: [' zhang ', 'bill', 'Cathy', 'the horse 6', 'xiao Ming', 'the girl', 'big strong'],}, yAxis: {type: 'value'}, Series :[{name:' text ', type:'bar', label:{show:true, position:'top',}, barWidth:'40%', Data :[88,92,63,77,94,80,72,]}]} myCharts. SetOption (option);Copy the code
Toolbox toolbar is configured to export images, dynamic typing, and data area scaling
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let option = {toolbox:{feature:{saveAsImage:{// export images show:true,}, dataView:{// dataView show:true,}, Restore :{// data reset show:true,}, dataZoom:{// region zoom show:true,}, magicType:{// dynamic chart type switch type:['bar','line']}}}, XAxis: {type: 'category' data: [' zhang ', 'bill', 'Cathy', 'the horse 6', 'xiao Ming', 'the girl', 'big strong'],}, yAxis: {type: 'value'}, series: [{name: 'Chinese'. type:'bar', label:{ show:true, position:'top', }, barWidth:'40%', Data :[88,92,63,77,94,80,72,]}]} myCharts. SetOption (option);Copy the code
Common Configuration Legend
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let option = {xAxis: {type: 'category' data: [' zhang ', 'bill', 'Cathy', 'the horse 6', 'xiao Ming', 'the girl', 'big strong'],}, yAxis: {type: 'value'}, Legend: {data: [' language ', 'mathematics']}, series: [{name:' Chinese ', type: 'bar' label: {show: true, position: 'top'}, barWidth: '40%'. Data: [88,92,63,77,94,80,72,]}, {name: 'mathematics', type:' bar 'barWidth:' 40% ', Data :[88,22,44,77,94,80,72,]}]} myCharts. SetOption (option);Copy the code
Basic line chart
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let the option = {xAxis: {type: 'category' data: [' month ', 'in February, march, April,' may '],}, yAxis: {type: 'value'}, Series: [{type: 'line' data:,44,20,99,55 [22]}]}. myCharts.setOption(option);Copy the code
Maximum value, minimum value, average value, annotation range, line, smoothness, style Settings
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let the option = {xAxis: {type: 'category' data: [' month ', 'in February, march, April,' may '],}, yAxis: {type: 'value'}, Series: [{type: 'line' data:,44,20,99,55 [22], markPoint: {data: [{type: 'Max' name: 'maximum}, {type: "min", }, markLine:{data:[{type:'average',}]}, smooth:true, lineStyle:{color:'yellow', type:'dashed'}, MarkArea: {data: [[{xAxis: 'in January'}, {xAxis: 'in'}]]}}}; myCharts.setOption(option);Copy the code
Basic Grid configuration
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let option = {// whether display grid:{show:true, borderWidth:5, borderColor:'pink',}, xAxis:{type:'category', Data: [' in January, February, march, April, 'may'], boundaryGap: false,}, yAxis: {type: 'value, scale: true,}, series: [{type: "line", Stack: 'all' data:,44,20,99,55 [22],}, {type: 'the line', stack: 'all' data:,66,88,22,10 [55],}}; myCharts.setOption(option);Copy the code
Area scaler
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); let option = { dataZoom:[ { type:'slider', //type:'inside', } ], xAxis:{ type:'category', Data: [' zhang ', 'bill', 'Cathy', 'the horse 6', 'xiao Ming', 'the girl', 'big strong'],}, yAxis: {type: 'value'}, series: [{name: 'Chinese', type: 'bar', Label :{show:true, position:'top',}, barWidth:'40%', data:[88,92,63,77,94,80,72,]}]} myCharts. SetOption (option);Copy the code
The basic realization of the pie chart
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let option = {series:[{type:'pie', data:[{name:' jingdong ', value:998}, {name:' Vipshop ', value:2209}, {name:' Taobao ', value:2440 } ] } ] } myCharts.setOption(option);Copy the code
Display value Settings
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let option = {series:[{type:'pie', data:[{name:' jingdong ', value:998}, {name:' Vipshop ', value:2209}, {name:' Taobao ', value:2440 } ], label:{ show:true, Formatter :(values) => {return '${values.name} % ${(values.percent)+'%'} '}}}]} mychart.setoption (option);Copy the code
Set the ring
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let option = {series:[{type:'pie', data:[{name:' jingdong ', value:998}, {name:' Vipshop ', value:2209}, {name:' Taobao ', value:2440 } ], radius:['50%','75%'] } ] } myCharts.setOption(option);Copy the code
Radar map
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let option = {radar:{indicator:[{name:' function ', value:100}, {name:' run ', value:100,}, {name:' run ', value:100,} {name: 'life' value: 100}, {name: 'ease of use, value: 100}}, series: [{type:' radar, data: [{name: huawei mobile phone, Value :[80,90,80,82,94], type:'specified', {name:' specified', type:'specified', Value :[70,82,75,70,78]}]} myCharts. SetOption (option);Copy the code
The radar chart shows the configuration of the numeric, area and plot types
- Sets the value displayed on label
- Set areaStyle to display area
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let option = {radar:{// Shape :'circle', indicator:[{name:' function ', value:100}, {name:' photo ', value:100,}, {name:' run ', Value: 100}, {name: 'life' value: 100,}, {name: 'ease of use, value: 100}}, series: [{type:' radar ', label: {show: true}. AreaStyle :{}, data:[{name:' huawei mobile ', value:[80,90,80,82,94], type:'specified', {name:' zte mobile ', type:'specified', Value :[70,82,75,70,78]}]} myCharts. SetOption (option);Copy the code
The dashboard
import echarts from 'echarts';
let root = document.getElementById('root');
let myCharts = echarts.init(root);
let option = {
series:[{
type:'gauge',
data:[
{
value:97,
}
]
}]
}
myCharts.setOption(option);
Copy the code
Use of themes
- The two main sets are dark and light respectively
import echarts from 'echarts';
let root = document.getElementById('root');
let myCharts = echarts.init(root,'dark');
let option = {
series:[{
type:'gauge',
data:[
{
value:97,
}
]
}]
}
myCharts.setOption(option);
Copy the code
The adaptive
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); window.onresize = myCharts.resize; let option = { color:['pink','pink','yellow'], tooltip:{ // trigger:'item', trigger:'item', // triggerOn:'click', Formatter :(args) => {return '${args. SeriesName}'; }}, xAxis: {type: 'category' data: [' zhang ', 'bill', 'Cathy', 'the horse 6', 'xiao Ming', 'the girl', 'big strong'],}, yAxis: {type: 'value'}, Series :[{name:' text ', type:'bar', label:{show:true, position:'top',}, barWidth:'40%', Data :[88,92,63,77,94,80,72,]}]} myCharts. SetOption (option);Copy the codeDependend event
import echarts from 'echarts'; let root = document.getElementById('root'); let myCharts = echarts.init(root); Let the option = {legend: {data: [' jingdong ', 'Vipshop', 'taobao']}, series: [{type: 'pie' data: [{name: 'jingdong, value: 998}, {name:' Vipshop ', Value: 2209}, {name: 'taobao' value: 2440}]}]} / / myCharts on (' click '(ev) = > {/ / console log (' ev, ev); / /}); myCharts.on('legendselectchanged',(ev) => { console.log('ev',ev); }) myCharts.setOption(option);Copy the codeMaking the address