6 つの echarts 統計グラフのスタイル変更を共有する

echarts グラフィックの作成は比較的簡単で、JavaScript を直接引用するだけです。このライブラリを使用する主な理由は 3 つあります。1 つは、このライブラリが Baidu プロジェクトであり、更新されているためです。 2 つ目は、このライブラリのプロジェクト ドキュメントが比較的詳細で、各ポイントが明確に説明されており、中国語なので理解しやすいことです。 3 点目は、このライブラリは幅広いグラフィックスをサポートしており、グラフィックスを直接切り替えることができるため、非常に使いやすいことです。

1: 折れ線グラフのバーの色を変更します

series : [ {
name : ‘SBP(收缩压)’,
type : ‘line’,
itemStyle : {
normal : {
lineStyle:{
color:’#f73d31’
}
}
},
data : y_data
},

2: タイトルの色属性を変更します

アイコンのメイン タイトルの色を赤に変更するには、タイトルに textStyle: {color: 'red' } を追加するだけです。
Picture .png

title: {
text: ‘平均耗时（分钟）’,
textStyle: {
color: ‘red’
},
},

3: 背景色の設定

var option={
backgroundColor:‘rgba(128, 128, 128, 0.1)’ //rgba设置透明度0.1
}

4: 空白ページ表示の修正

すべてのデータが正常で、コンソールにエラーが報告されていないにもかかわらず、データがページに表示されない場合、このとき、「固定幅を設定するだけ」を追加する必要があります。

5: モバイル端末の適応問題、異なる携帯電話の画面に適応する問題

複数のチャートがある場合、var option = {} の後にこのようなコードを追加するだけで、表示画面のサイズに応じてアイコンが変更されます。

window.onresize = function () {
myChart1.resize();
       myChart2.resize();      
        myChart3.resize();        
        }

6: xy軸座標軸の色の変更

x軸座標:

xAxis: {
type: ‘value’,
boundaryGap: [0, 0.01],
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

y軸座標:

yAxis: {
type: ‘category’,
data: [‘SA服务’, ‘洗车’, ‘总检’, ‘喷漆’, ‘钣金’, ‘机修’, ‘等号’],
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: [’#e33b38’]
}
},
nameTextStyle: {
color: [’#e33b38’]
},
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

上記はチャートの属性値の変更です、ようこそお読みくださいそしてそこから学びましょう！

以上が6 つの echarts 統計グラフのスタイル変更を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。