e-charts图样式总结

option: {
        //颜色
        color: [
          "#52c41a",
          "#36a5ff",
          "#2dc1c0",
          "#f18429",
          "#f4ca38",
          "#6795F2",
          "#BF73F9",
        ],
        //鼠标悬浮之后显示的内容
        tooltip: {
          trigger: "item",
          formatter: "{a}：</br>{b}({d}%)",
        },
        //调整e-charts距离上下左右边距
        grid: {
          top: "1%",
          left: "0%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 标题设置
        title: {
          text: "弹药总数", //主标题
          subtext: "9812", //副标题
          textAlign: "center",
          left: "151rem",
          top: "65rem",
          //主标题样式设置
          textStyle: {
            color: "#00caf5", //字体颜色
            fontSize: "10",
            fontFamily: "Microsoft YaHei", //字体
            align: "center", //文字的水平方式
            verticalAlign: "middle", //文字的垂直方式
            fontWeight: "normal",
          },
          // 副标题样式设置
          subtextStyle: {
            color: "#fbfff0", //字体颜色
            fontSize: "15",
            fontFamily: "Microsoft YaHei", //字体
            align: "center", //文字的水平方式
            verticalAlign: "middle", //文字的垂直方式
            fontWeight: "bold",
          },
        },
        //图例设置
        legend: [
          {
            icon: "circle",
            orient: "circle",
            x: "55%",
            y: "15%",
            align: "left",
            data: [],
            itemWidth: 5,
            itemHeight: 4,
            textStyle: {
              fontSize: 12,
              color: "#00caf5",
            },
          },
          {
            icon: "circle",
            orient: "circle",
            x: "55%",
            y: "37%",
            align: "left",
            data: [],
            itemWidth: 5,
            itemHeight: 4,
            textStyle: {
              fontSize: 12,
              color: "#00caf5",
            },
          },
          {
            icon: "circle",
            orient: "circle",
            x: "55%",
            y: "59%",
            align: "left",
            data: [],
            itemWidth: 5,
            itemHeight: 4,
            textStyle: {
              fontSize: 12,
              color: "#00caf5",
            },
          },
          {
            icon: "circle",
            orient: "circle",
            x: "75%",
            y: "15%",
            align: "left",
            data: [],
            itemWidth: 5,
            itemHeight: 4,
            textStyle: {
              fontSize: 12,
              color: "#00caf5",
            },
          },
          {
            icon: "circle",
            orient: "circle",
            x: "75%",
            y: "37%",
            align: "left",
            data: [],
            itemWidth: 5,
            itemHeight: 4,
            textStyle: {
              fontSize: 12,
              color: "#00caf5",
            },
          },
          {
            icon: "circle",
            orient: "circle",
            x: "75%",
            y: "59%",
            align: "left",
            data: [],
            itemWidth: 5,
            itemHeight: 4,
            textStyle: {
              fontSize: 12,
              color: "#00caf5",
            },
          },
        ],
        series: [
          {
            name: "质量等级",
            type: "pie",
            //设置为南格丁尔图
            roseType: "radius",
            radius: [30, 50],
            //设置圆环间隙
            itemStyle: {
              normal: {
                borderWidth: 2,
                // borderColor: "blue",//边框颜色
              },
            },
            center: ["30%", "45%"],
            // itemStyle:{
            //   normal: {
            //     borderWidth: 2,
            //     borderColor: '#fff',
            //   }
            // },

            label: {
              show: true,
              // formatter: [
              //   '{a|{b}:}',
              //   "{d}%",
              // ].join("\n"),
               显示百分比
              formatter: ["{d}%"].join("\n"),
              //设置label到圆环的距离
              padding: [0, -25],
              rich: {
                // lineHeight:56,
                // b:{
                //   color:'#333333',
                //   fontSize:14
                // },
                // a:{
                //   color:'#999999',
                //   padding:[3,0,3,0],
                //   fontSize:14
                // }
              },
              // normal: {
              //   show: false,
              //   position: 'center'
              // },
              //鼠标放上去的样式
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
            },
            //柱状图外面连接lable的线
            labelLine: {
              normal: {
                length: 15,
                length2: 10,
                show: false,
              },
            },
            data: [],
          },
        ],
        
      },

**柱状图、折线图X轴显示不全可以添加这个滑块属性**
dataZoom: {
		        type: "inside",
		        realtime: true,
		        show: true,
		        start: 0,
		        end: 100, //end到100可以将X轴内容全部显示出来
		        showDetail: true,
		      },
**颜色渐变**
        series: [{
		        itemStyle: {
		          normal: {
		            areaStyle: {
		              type: 'default',
		              //渐变色实现
		              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
		                //三种由深及浅的颜色
		                [{
		                  offset: 0,
		                  color: '#FFCC00'
		                }, {
		                  offset: 0.5,
		                  color: '#F2D562'
		                }, {
		                  offset: 1,
		                  color: 'transparent'
		                }]),
		            },
		            lineStyle: {  //线的颜色
		              color: '#FFD600',
		              width: 3
		            },
		          },
		        },
		        data: [1000, 1332, 701, 1534, 1190, 1330, 520],
		        type: 'line',
		        symbol:'none' //去除折线图小圆点
		      }]
**修改x轴和y轴线**
		      xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00'],
		        axisLine: {
		          lineStyle: {
		            type: "solid",
		            color: "#2C4A66",
		            width: "1", //坐标线的宽度
		          },
		        },
		        axisLabel: {
		          interval:0,
		          textStyle: {
		            color: "#83C1E5", //坐标值的具体的颜色
		            fontSize: '16'
		          },
		        },
		        axisTick: {
		          show: false,
		        },
		      },
		      yAxis: {
		        type: 'value',
		        axisLine: {
		          show: false,
		          lineStyle: {
		            type: "solid",
		            color: "#83C1E5", //左边坐标值的具体颜色
		            width: "1", //坐标线的宽度
		          },
		        },
		        axisTick: {
		          show: false,
		        },
		        splitLine: {
		          show: true,
		          lineStyle: {
		            color: "#426687",
		            width: 1,
		            type: "solid",
		          },
		        },
		        axisLabel: {
		          textStyle: {
		            fontSize: '16'
		          },
		        }
		      },

效果