& lt; Template> 
 
 

 

<script> 
The import echarts from 'echarts' 
Export the default {
Name: "public", 
Data () {
Return {} 
}, 
Mounted () {enclosing the Histogram ()}, 
Methods: {
The Histogram () {


Const option={
Tooltip: {
The trigger: 'axis', 
AxisPointer: {//axis indicator, axis trigger effective 
Type: 'shadow'//default is linear, optional for: 'the line' | 'shadow' 
} 
}, 
The grid: {
Left: '3%', 
Right: '4%', 
Bottom: '3%', 
ContainLabel: true 
}, 
XAxis: [
{
Type: 'category', 
Data: [' quality courts', 'health courts',' stay potentialities and courts', 'to optimize the courts'], 
AxisTick: {
AlignWithLabel: true 
}, 
//set the font color coordinate system and the width 
AxisLine: {//it is x axis text color 
Graphics.linestyle: {
Color: # FFF, 
} 
} 
} 
], 
YAxis: [
{
Type: 'value', 
Min: 0, 
Interval: 50, 
//splitArea: {show: false},//remove the grid area 
//remove the grid lines 
SplitLine: {
Graphics.linestyle: {
//gray 
Color: gray, 
Type: 'dashed' 
} 
}, 
//set the font color coordinate system and the width 
AxisLine: {//this is y text color 
Graphics.linestyle: {
Color: # FFF, 
} 
} 
} 
], 
Series: [
{
Name: 'number' 
Type: 'bar', 
BarWidth: '60%', 
Data: [10, 52, 200, 334], 
ItemStyle: {
Normal: {
Color: function (params) {
Var colorList=[
'# 80 FFFF', '# 8080 ff', '# 70 b603', '# 63 f3ae' 
]; 
Return colorList [params dataIndex] 
}, 
Label: {
Show: true,//open display 
Position: 'top',//in the above shows that 
TextStyle: {//numerical style 
Color: white, 
FontSize: 16 
} 
} 
} 
}, 
} 
] 
}; 
Const loadChart=echarts. Init (document. GetElementById (" Histogram ")); 
LoadChart. SetOption (option); 
Window. The onresize=loadChart. Resize; 

/* $(window). The resize (function () {//it is the ability to let chart adaptive code 
LoadChart. The resize (); 
}); */


} 
} 
} 
</script> 

CodePudding user response: