1.スライダーのメインコードを表示する
dataZoom:[
{
type: "slider", // スライダーはスライディング ブロックがあることを意味します。
show: true,
xAxisIndex: [0], // x 軸の折りたたみ
開始を意味します: 1, // データ ウィンドウの開始パーセンテージrange、1% を表します
end:100,//データ ウィンドウ範囲の終了パーセンテージ。35% の座標の
下端を示します: "20",
},
],
2.X軸フォントチルト表示
axisLabel: {
color: "#999", //X 軸のフォントの色の
間隔: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", // スライダはスライディング ブロックがあることを意味します,
show: true,
xAxisIndex: [0], // は x 軸の折りたたみ
開始を意味します: 1, // data window 範囲の開始パーセンテージ。1% を示します。
end:100, //データ ウィンドウ範囲の終了パーセンテージ。35% 座標の
下端を示します。: "20",
},
],
Grid: {
left: '18%',
bottom:'38%'
},
yAxis: {
type: "value", //y 軸の座標軸の種類
splitLine
: {
show: true, //y 軸を表示するかどうか-axis axis
lineStyle : {
color: "#ccc", //y 軸の色 幅
: '1.5', //y 軸の線の幅
: "dashed", //solid 実線line/ 点線 点線/ 一点鎖線
},
} ,
axisLine: {
// y軸座標軸
show: false,
lineStyle: {
color: "#009dff",
},
},
軸ティック: {
show: false,
}、
axisLabel: {
color: "#999", //y 軸の目盛りのテキストの色
fontSize: '16', //y 軸の目盛のテキスト サイズ
},
},
xAxis: {
type: "category", //x -axis 座標 軸の種類
データ: titleArr,
axisLine: {
show: false, //x 軸の軸を表示するかどうか
lineStyle: {
color: "#009dff",
},
},
axisTick: {
show: false,
},
axisLabel : {
color: "# 999", //X 軸のフォント色の
間隔:0, //すべての X 軸ラベルの表示を表します
回転を表します: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 {
series: [
{
// 古いタグの値を新しいタグに代入する
newParamsName = params;
}
//最終文字列を返します
return newParamsName;
},
},
},
name: "reviewed",
type: "bar",
barWidth: 12,
barGap: "80%",
data: allArr,
itemStyle: {
color: {
タイプ: "linear"、
x: 0、
y: 1、
x2: 0、
y2: 0、
colorStops: [
{
オフセット: 0、
color: "rgb(0,101,255)", // 0% のカラー
},
{
offset: 1,
color: "rgb(0,101,255)", // 100% のカラー
},
},
// barBorderRadius: [24, 24, 0, 0],
} ,
]、
global: false, //デフォルトは false
},
normal: {
//棒グラフの上のタイトル
label: {
show: false, //棒グラフの上の番号
location: "top",
textStyle: {
color: " #000" ,
fontSize: 10,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//颜色渐变
{
offset: 0,
color: "rgb(0,101,255)",
},
// {
// offset: 0.5,
// color : "#00b1f2",
// },
{
オフセット: 1,
カラー: "rgb(0,101,255)",
},
]),
},
},
},
],
};
var myChart = echarts.init(this.$ refs.leftCharts);
myChart.setOption(オプション);
window.onresize = function () {
myChart.resize();
}
}
効果は次の図に示すとおりです。
やっと
読んでいただきありがとうございます。不備がございましたら、お気軽にコメント欄でご相談ください。