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