折线图配置

  1 var option = {
  2       // 折线对应的标题
  3       legend: {
  4         data: ['总收入', '订单笔数'],
  5         right: 10,
  6         top: 3
  7       },
  8       // 布局位置
  9       grid: {
 10         top: '50px',
 11         left: '4%',
 12         right: '2%',
 13         bottom: '4%',
 14         containLabel: true
 15       },
 16       // 横坐标刻度文字数据展示
 17       xAxis: {
 18         type: 'category',
 19         splitLine: { show: false },
 20         boundaryGap: false,
 21         axisLabel: {
 22           textStyle: {
 23             fontSize: 10,
 24             color: '#333'
 25           }
 26         },
 27         axisLine: {
 28           // 线的自定义样式
 29           lineStyle: {
 30             // 线的颜色
 31             color: {
 32               type: 'linear',
 33               colorStops: [{
 34                 offset: 0, color: '#E15D68' // 0% 处的颜色
 35               }, {
 36                 offset: 1, color: '#2AB7FE' // 100% 处的颜色
 37               }],
 38             },
 39           },
 40         },
 41         // 数据
 42         data: this.data.trendServerData[name],
 43       },
 44       // 纵坐标配置，数组【0】在左边，【1】在右边
 45       yAxis: [{
 46         type: 'value',
 47         nameTextStyle: {
 48           fontSize: 12
 49         },
 50         splitLine: {
 51           show: false
 52         },
 53         axisTick: {
 54           show: false
 55         },
 56         // 线的配置
 57         axisLine: {
 58           show: true,
 59           lineStyle: {
 60             color: '#E15D68',
 61           }
 62         },
 63         // 字体的配置
 64         axisLabel: {
 65           color: '#666',
 66           fontSize: 12,
 67           textStyle: {
 68             fontSize: 15,
 69             color: '#E15D68'
 70           }
 71         }
 72       },
 73       {
 74         type: 'value',
 75         nameTextStyle: {
 76           fontSize: 12
 77         },
 78         splitLine: {
 79           show: false
 80         },
 81         axisTick: {
 82           show: false
 83         },
 84         // 线的配置
 85         axisLine: {
 86           show: true,
 87           lineStyle: {
 88             color: '#2AB7FE',
 89           }
 90         },
 91         // 字体的配置
 92         axisLabel: {
 93           color: '#666',
 94           fontSize: 12,
 95           textStyle: {
 96             fontSize: 15,
 97             color: '#2AB7FE'
 98           }
 99         }
100       }],
101       // 折线数据填充
102       series: [{
103         // 和legend中的data对应
104         name: '订单笔数',
105         type: 'line',
106         symbolSize: 2,
107         yAxisIndex: 1,
108         // 数据源
109         data: this.data.trendData[name].number,
110         // 每个点上显示对应的数据
111         label: {
112           show: true,
113           formatter: function (data) {
114             return data.value;
115           }
116         },
117         // 线的样式设置
118         itemStyle: {
119           normal: {
120             color: '#3CA3FF',
121             lineStyle: {  //线的颜色
122               color: '#3CA3FF'
123             },
124             width: 1
125           }
126         }
127       }, {
128         // 和legend中的data对应
129         name: '总收入',
130         type: 'line',
131         symbolSize: 2,
132         yAxisIndex: 0,
133         // 数据源
134         data: this.data.trendData[name].amount,
135         // 每个点上显示对应的数据
136         label: {
137           show: true,
138           formatter: function (data) {
139             return data.value;
140           }
141         },
142         // 线的样式设置
143         itemStyle: {
144           normal: {
145             color: '#F56379',
146             lineStyle: {  //线的颜色
147               color: '#F56379'
148             },
149             width: 1
150           }
151         }
152       }
153       ]
154     };