1.显示滑动条主要代码
dataZoom:[
{
type:"slider",//slider表示有滑动块的，
show:true,
xAxisIndex:[0],//表示x轴折叠
start:1,//数据窗口范围的起始百分比,表示1%
end:100,//数据窗口范围的结束百分比,表示35%坐标
bottom:"20",
},
],
2.x轴字体倾斜显示
axisLabel: {
color: "#999", //x轴字体颜色
interval:0,//代表显示所有x轴标签显示
rotate:40,
textStyle: {
fontSize: 16,
},
3.完整代码
调用this.leftCharts(listx,listy) 进行传参
//柱状图
leftCharts(allArr, titleArr) {
var option = {
backgroundColor: "#08173600",
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
dataZoom:[
{
type:"slider",//slider表示有滑动块的，
show:true,
xAxisIndex:[0],//表示x轴折叠
start:1,//数据窗口范围的起始百分比,表示1%
end:100,//数据窗口范围的结束百分比,表示35%坐标
bottom:"20",
},
],
grid: {
left: '18%',
bottom:'38%'
},
yAxis: {
type: "value", //y轴坐标轴类型
splitLine: {
show: true, //是否显示y轴轴线
lineStyle: {
color: "#ccc", //y轴轴线的颜色
width: '1.5', //y轴轴线线宽
type: "dashed", //solid实线 / dotted点线 / dashed虚线
},
},
axisLine: {
// y轴坐标轴轴线
show: false,
lineStyle: {
color: "#009dff",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#999", //y轴刻度线文字颜色
fontSize: '16', //y轴刻度线文字大小
},
},
xAxis: {
type: "category", //x轴坐标轴类型
data: titleArr,
axisLine: {
show: false, //是否显示x轴轴线
lineStyle: {
color: "#009dff",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#999", //x轴字体颜色
interval:0,//代表显示所有x轴标签显示
rotate:40,
textStyle: {
fontSize: 16,
},
formatter: function (params) {
var newParamsName = ""; // 最终拼接成的字符串
var paramsNameNumber = params.length; // 实际标签的个数
var provideNumber = 7; // 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = ""; // 表示每一次截取的字符串
var start = p * provideNumber; // 开始截取的位置
var end = start + provideNumber; // 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr; // 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName;
},
},
},
series: [
{
name: "已评",
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)", // 0% 处的颜色
},
{
offset: 1,
color: "rgb(0,101,255)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
normal: {
//柱形图上方标题
label: {
show: false, //柱状图上方数字
position: "top",
textStyle: {
color: "#000",
fontSize: 10,
},
},
// barBorderRadius: [24, 24, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//颜色渐变
{
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();
}
}
效果如图所示：
最后
感谢阅读，如有不足之处，欢迎在评论区讨论！