折线图_柱状图_圆环echarts dotted'虚线 'solid'实线 color: numColor, width: 1, borderColor: "transparent", //拐点边框颜色 }, }, }, }, { name: "A", type: "line", smooth: true, z: 1, // symbol: 'roundRect配置项内容和展示

折线图_柱状图_圆环

       let numColor = "rgba(228,244,255,1)";
 let circleColor = "rgba(168,200,255,1)";
 let centerCircleColr = "rgba(255,153,51,1)"
 let list = [{
         TIME: "2011",
         COUNT: 402,
     },
     {
         TIME: "2012",
         COUNT: 213,
     },
     {
         TIME: "2013",
         COUNT: 146,
     },
     {
         TIME: "2014",
         COUNT: 232,
     },
     {
         TIME: "2015",
         COUNT: 203,
     },
     {
         TIME: "2016",
         COUNT: 298,
     },
     {
         TIME: "2017",
         COUNT: 586,
     },
     {
         TIME: "2018",
         COUNT: 622,
     },
     {
         TIME: "2019",
         COUNT: 225,
     },
     {
         TIME: "2020",
         COUNT: 239,
     },
     {
         TIME: "2021",
         COUNT: 139,
     },
 ];
 let xAxisData = [];
 let seriesData = [];
 let maxList = [];
 list.map((item, index) => {
     xAxisData.push(item.TIME);
     seriesData.push(item.COUNT);
 });
 let max = Math.max(...seriesData) + 5;
 list.map((item, index) => {
     maxList.push(max);
 });
 option = {
     backgroundColor: "#000",
     tooltip: {
         trigger: "axis",
         axisPointer: {
             lineStyle: {
                 color: {
                     type: "linear",
                     x: 0,
                     y: 0,
                     x2: 0,
                     y2: 1,
                     colorStops: [{
                             offset: 0,
                             color: "rgba(0, 255, 233,0)",
                         },
                         {
                             offset: 0.5,
                             color: "rgba(255, 255, 255,1)",
                         },
                         {
                             offset: 1,
                             color: "rgba(0, 255, 233,0)",
                         },
                     ],
                     global: false,
                 },
             },
         },
         formatter: (params) => {
             // let obj = this.listAry[params[0].dataIndex];
             // // console.log("obj",obj)
             // let str = `${params[2].name}月<br/>总数${params[2].value}个
             // <br/>核心区 ${obj.HXQCOUNT} 个
             // <br/>控制区 ${obj.KZQCOUNT} 个
             //  <br/>协调区 ${obj.XTQCOUNT} 个
             // `;
             // return str;
         },
     },
     grid: {
         top: 50,
         left: 30,
         right: 40,
         bottom: 60,
     },
     xAxis: {
         name: "月",
         data: xAxisData,
         axisLine: {
             lineStyle: {
                 color: "rgba(16,85,120,1)",
                 width: "2",
             },
         },
         axisTick: {
             alignWithLabel: true,
         },
         splitLine: {
             show: false,
             lineStyle: {
                 color: "#ccc",
             },
         },
         axisLabel: {
             // rotate: 30,
             margin: 20,
             textStyle: {
                 fontWeight: "600",
                 color: "rgba(215,234,245,1)",
                 fontSize: "12px",
             },
         },
     },
     yAxis: {
         name: "单位（个）",
         nameTextStyle: {
             color: "rgba(53,107,144,1)",
         },
         splitLine: {
             lineStyle: {
                 color: "rgba(86,122,147,0.08)",
             },
         },
         axisTick: {
             show: false,
             lineStyle: {
                 color: "rgba(16,85,120,1)",
             },
         },
         axisLine: {
             show: false,
             lineStyle: {},
         },
         axisLabel: {
             show: true,
             textStyle: {
                 color: "rgba(86,122,147,1)",
                 fontSize: "14px",
             },
         },
     },
     series: [{
             type: "bar",
             z: 1,
             itemStyle: {
                 normal: {
                     color: {
                         type: "linear",
                         x: 0,
                         y: 0,
                         x2: 0,
                         y2: 1,
                         colorStops: [{
                                 offset: 0,
                                 color: "rgba(49, 80, 99, 0.5)",
                             },
                             {
                                 offset: 0.2,
                                 color: "rgba(49, 80, 99, 0.5)",
                             },
                             {
                                 offset: 1,
                                 color: "rgba(49, 80, 99, 0.1)",
                             },
                         ],
                         globalCoord: false,
                     },
                 },
             },
             barWidth: 24,
             barGap: 10,
             data: maxList,
         },
         {
             data: seriesData,
             type: "line",
             symbol: "circle", //设定为实心点
             symbolSize: 20, //圆点大小
             smooth: true,
             showSymbol: true,
             hoverAnimation: true,
             animation: true,
             label: {
                 show: true,
                 position: "top",
                 textStyle: {
                     color: "rgba(215,234,245,1)",
                     fontSize: 14,
                 },
             },
             itemStyle: {
                 normal: {
                     color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [{
                             offset: 0,
                             color: centerCircleColr,
                         },
                         {
                             offset: 0.2,
                             color: centerCircleColr,
                         },
                         {
                             offset: 0.21,
                             color: "rgba(255,153,51,0)",
                         },
                         {
                             offset: 1,
                             color: "rgba(255,153,51,0)",
                         },
                     ]), //圆点颜色
                     borderColor: circleColor,
                     borderWidth: 2,
                     lineStyle: {
                         //折线颜色大小
                         type: "solid", //'dotted'虚线 'solid'实线
                         color: numColor,
                         width: 1,
                         borderColor: "transparent", //拐点边框颜色
                     },
                 },
             },
         },
         {
             name: "A",
             type: "line",
             smooth: true,
             z: 1,
             // symbol: 'roundRect',
             lineStyle: {
                 normal: {
                     width: 2,
                     color: "rgba(53,107,144,1)",
                 },
             },
             symbolSize: [0, 0],
             data: seriesData,
         },
     ],
 }