折线图配置

  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     };

 

//浮窗样式
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器,坐标轴触发有效
            type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
          },
          backgroundColor: "rgba(0,0,0,0.5)",
          borderColor: "rgba(0,0,0,0.5)",
          borderWidth: 1,
          textStyle: {
            color: "#FFFFFF",
            fontSize: "14"
          },

          formatter: function(params) {
            return (
              params[0].name + "<br/> " + params[0].seriesName + params[0].value
            );
          }
        },
https://www.jianshu.com/p/094d9f413519
    color: ["#ff9b00", "#00ffff", ], //全局调色盘,在legend的同级设置color数组,里面的颜色为线对应的颜色
        legend: {
          show: true,
          orient: "horizontal",
          // 图例信息
          itemWidth: 14,
          itemHeight: 3,
          textStyle: {
            color: "#fff", //图例的文字颜色
            fontSize: 12,
          },

          right: "5%",
          top: "3%",
          data: [
            {
              name: "呼入",
              icon: "rect",
            },
            {
              name: "呼出",
              icon: "rect",
            },
          ], //data中的值要对应series中的name属性

          formatter: function (name) {
            return name;
          },
          // itemStyle: {
          //   color: "#ff9b00",
          // },
        },
series: [
          {
            name: "呼入",
            type: "line",
            symbol: "none", // 默认是空心圆(中间是白色的),改成实心圆
            showAllSymbol: true,
            symbolSize: 16,
            smooth: true,
            itemStyle: {//关键代码
              normal: {
                areaStyle: {
                  type: "default",
                  color: "#ff9b00",
                },
                lineStyle: {
                  normal: {
                    width: 0.8,
                    color: "#ff9b00", // 线条颜色
                  },
                },
              },
            },
            areaStyle: {//区域的颜色
              normal: {
                //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255,155,0,.6)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255,155,0, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            data: goToSchool,
          },
          {
            name: "呼出",
            type: "line",
            symbol: "none", // 默认是空心圆(中间是白色的),改成实心圆
            showAllSymbol: true,
            symbolSize: 16,
            smooth: true,
            lineStyle: {//关键代码
              normal: {
                width: 1,
                color: "#00ffff", // 线条颜色
              },
            },

            areaStyle: {
              normal: {
                //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,255,255,.6)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,255,255, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            data: goOutSchool,
          },
        ],

 

posted @ 2023-01-10 18:50  wj704  阅读(11)  评论(0编辑  收藏  举报