1. Display the main code of the slider
dataZoom:[
{
type: "slider", // slider means there is a sliding block,
show: true,
xAxisIndex: [0], // means x-axis folding
start: 1, // the starting percentage of the data window range, represents 1%
end:100,//The end percentage of the data window range, indicating 35% coordinate
bottom: "20",
},
],
2.X-axis font tilt display
axisLabel: {
color: "#999", //X-axis font color
interval:0, //Represents display of all x-axis labels,
rotate:40,
textStyle: {
fontSize: 16,
},
3. Complete code
Call this.leftCharts(listx,listy) to pass parameters
//Bar chart
leftCharts(allArr, titleArr) {
var
option = {
backgroundColor: "#08173600",
tooltip: {
trigger: "axis",
axisPointer: {
type: " shadow",
},
},
dataZoom:[
{
type: "slider", // slider means there is a sliding block,
show: true,
xAxisIndex: [0], // means x-axis folding
start: 1, // data window The starting percentage of the range, indicating 1%
end:100, //The ending percentage of the data window range, indicating the 35% coordinate
bottom: "20",
},
],
grid: {
left: '18%',
bottom:'38%'
},
yAxis: {
type: "value", //y-axis coordinate axis type
splitLine
: {
show: true, //whether to display the y-axis axis
lineStyle : {
color: "#ccc", //The color of the y-axis axis
width: '1.5', //The width of the y-axis axis line
type: "dashed", //solid solid line/ dotted dotted line/ dashed dashed line
},
} ,
axisLine: {
// y-axis coordinate axis
show: false,
lineStyle: {
color: "#009dff",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#999", //y-axis tick mark text color
fontSize: '16', //y-axis tick mark text size
},
},
xAxis: {
type: "category", //x-axis coordinate Axis type
data: titleArr,
axisLine: {
show: false, //Whether to display the x-axis axis
lineStyle: {
color: "#009dff",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "# 999", //X-axis font color
interval:0, //Represents display of all x-axis labels
rotate:40,
textStyle: {
fontSize: 16,
},
formatter: function (params) {
var newParamsName = ""; // The final spliced string
var paramsNameNumber = params.length; // The actual number of tags
var provideNumber = 7; / / The number of words that can be displayed in each line
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // If you want to wrap the line, how many lines need to be displayed and rounded up
/**
* Determine whether the number of labels is greater than the specified number , if it is greater, perform line wrapping processing. If not greater, that is, equal to or less than, return the original label
*/
// The condition is equivalent to rowNumber>1
if (paramsNameNumber > provideNumber) {
/** Loop each row, p represents the row*/
for (var p = 0; p < rowNumber; p++) {
var tempStr = ""; // Indicates the string intercepted each time
var start = p * provideNumber; // The position where interception begins
var end = start + provideNumber; // The position where interception ends
// Special processing of the last line here Index value
// Assign the value of the old tag to the new tag
if (p == rowNumber - 1) {
// No line break for the last time
tempStr = params.substring(start, paramsNameNumber);
} else {
// Concatenate strings and break line every time
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr; //The final string
}
} else {
newParamsName = params;
}
//Return the final string
return newParamsName;
},
},
},
series: [
{
name: "reviewed",
type: "bar",
barWidth: 12,
barGap: "80%",
data: allArr,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgb(0,101,255)", // Color at 0%
},
{
offset: 1,
color: "rgb(0,101,255)", // Color at 100%
},
},
// barBorderRadius: [24, 24, 0, 0],
} ,
],
global: false, //The default is false
},
normal: {
//The title above the bar chart
label: {
show: false, //The number above the bar chart
position: "top",
textStyle: {
color: "#000" ,
fontSize: 10,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//Color gradient
{
offset: 0,
color: "rgb(0,101,255)",
},
// {
// offset: 0.5,
// color: "#00b1f2",
// },
{
offset: 1,
color: "rgb(0,101,255)",
},
]),
},
},
},
],
};
var myChart = echarts.init(this.$refs.leftCharts);
myChart.setOption(option);
window.onresize = function () {
myChart.resize();
}
}
The effect is as shown in the figure:
at last
Thanks for reading. If you have any deficiencies, please feel free to discuss them in the comment area!