Echarts X軸Y軸の種類、色、およびラベルフォントの色設定
10994 ワード
1 //
2 var initRjxnChart = function () {
3 var rjxnChart = echarts.init(document.getElementById("rjxn_echart"));
4 var rjxnoption = {
5 tooltip: {
6 trigger: 'axis',
7 },
8 grid: {
9 left: '8%',
10 bottom: '20%',
11 top: '10%',
12 right: '8%',
13 },
14 legend: {
15 show: true,
16 orient: 'horizontal',
17 data: [' '],
18 x: '8%',
19 y: '0%',
20 textStyle: {
21 color: '#8c8c92'
22 }
23 },
24 color: ["#cd9136"],
25 xAxis: [{
26 type: 'category',
27 data: [' ', ' ', ' ', ' ', ' ', ' ', ' '],
28 boundaryGap: true,
29 axisTick: { // X
30 show: false,
31 length: 10,
32 lineStyle: {
33 color: 'red',
34 type: 'solid',
35 width: 2
36 }
37 },
38 axisLabel: { // X
39 textStyle: {
40 color: '#8c8c92', //
41 }
42 },
43 splitLine:{
44 show: true, // X
45 lineStyle: {
46 type: 'dashed',
47 color: '#292c38'
48 }
49 },
50 axisLine: {
51 show: true, // X
52 lineStyle: {
53 type: 'dashed',
54 color: '#292c38'
55 }
56 },
57 }],
58 yAxis: [{
59 type: 'value',
60 name: '',
61 min: 0,
62 max: 3000,
63 interval: 500,
64 axisLabel: {
65 formatter: '{value}',
66 textStyle: {
67 color: '#8c8c92', //
68 }
69 },
70 axisLine: {
71 show: true, // Y
72 lineStyle: {
73 type: 'dashed',
74 color: '#292c38'
75 }
76 },
77 splitLine:{
78 show: true,
79 lineStyle: {
80 type: 'dashed',
81 color: '#292c38'
82 }
83 }
84 }],
85 series: [{
86 name: ' ',
87 type: 'line',
88 data: [100, 200, 100, 500, 100, 100, 1000]
89 }
90 ]
91 };
92 if (rjxnoption && typeof rjxnoption === "object") {
93 rjxnChart.setOption(rjxnoption, true);
94 }
95 };
転載先:https://www.cnblogs.com/zsongs/p/7340518.html