echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标hover时候的样式，用纵向阴影

上面先说注意事项

1.如果使用show hidden控制图表显示隐藏，某些切换效果很奇怪，比如饼图，会从左上角开始放大，很丑，这个时候我们可以设置其宽高来解决问题,给其设置宽高后，切换的奇怪效果即可消失。

<!-- 饼图組件 -->
<div class="chart01" echarts #myEchart01 [options]="option01"></div>
.chart01{
  width: 23.426vw;
  height: 21.523vw;
}

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { NgxEchartsService } from 'ngx-echarts';
@Component({
  selector: 'app-echart04',
  templateUrl: './echart04.component.html',
  styleUrls: ['./echart04.component.less']
})
export class Echart04Component implements OnInit {

  constructor(

    private es: NgxEchartsService,
  ) { }

  ngOnInit(): void {
  }

  ngAfterViewInit() {
    this.setEcharts01()
  }
  @ViewChild('myEchart01', { static: false }) myEchart01: ElementRef;
  option01 = {
    title: {
      text: '2323',
      textStyle: { fontSize: 26 },
      left: 'center',
      top: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)',
    },
    series: [
      {
        type: 'pie',
        radius: ['34%', '57%'],
        center: ['50%', '50%'],
        selectedMode: 'single',
        data: [
          { value: 100, name: '中' },
          { value: 200, name: '高' },
          { value: 50, name: '低' },
        ],
        emphasis: {
          // 这个是鼠标放上去时候的阴影
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 5,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };
  setEcharts01() {
    this.es.getInstanceByDom(this.myEchart01.nativeElement).setOption(this.option01);
  }
}

1.饼图怎么调整左右位置

只需要调整option.series里的center: ['30%', '50%']

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series : [  // 把饼图挪到了左边
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['30%', '50%'],  //  这个代码~~
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
    ]

2.更改x轴样式,控制样式里的X轴字在中间, 距离Y轴还有点距离

xAxis: {
      type: 'category',
      axisTick: { alignWithLabel: true }, // 控制样式里的X轴字在中间距离Y轴还有点距离
      data: ['5', '10', '15', '20', '25', '30'],
    },

3.echarts将网格线设置成虚线

yAxis: {
    splitLine :{    //网格线
        lineStyle:{
            type:'dashed'    //设置网格线类型 dotted：虚线   solid:实线
        },
        show:true //隐藏或显示
    }
}

4.x轴刻度居中

option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow',
        // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    grid: { top: '12%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: [
      {
        type: 'category',
        data: ['8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30', '20:30'],
        axisTick: { alignWithLabel: true }, // 刻度居中核心代码
        axisLabel: {
          textStyle: {
            // color: 'black', // 修改X轴文字的颜色
            fontSize: '9', // 修改X轴文字大小
          }
        },
      },
    ],
    // xAxis: [
    //   {
    //     data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],
    //     show: false,
    //   },
    //   {
    //     data: ['8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30', '20:30', '21:30'],
    //     position: 'bottom',
    //     boundaryGap: false,
    //     axisPointer: {
    //       show: false,
    //     },
    //     nameTextStyle: {
    //       color: '#999',
    //     },
    //     axisLine: {
    //       show: false,
    //     },
    //     axisTick: {
    //       show: false,
    //     },
    //     axisLabel: {
    //       // interval: 0,
    //       // color: '#999999',
    //       textStyle: {
    //         color: 'red', // 修改X轴文字的颜色
    //         fontSize: '9', // 修改X轴文字大小
    //       }
    //     },
    //     // splitLine: { // 背景竖着的刻度线
    //     //     show: true,
    //     //     lineStyle: {
    //     //         color: '#F1F1F1',
    //     //     },
    //     // },
    //   },
    // ],
    yAxis: [{
      type: 'value',
      splitLine: {    //网格线
        lineStyle: {
          type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
        },
        show: true //隐藏或显示
      }
    }],
    series: [{
      name: '直接访问', type: 'bar', barWidth: '60%', data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],

      itemStyle: {
        normal: {
          //这里是重点
          color: function (params) {
            // var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
            // return colorList[params.dataIndex]
            return '#0eb30e'
          }
        }
      }
    }],
  }

5.echarts X轴区间柱形图，X轴 刻度数组长度 比 数据数组长度 多一个

option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow',
        // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    grid: { top: '12%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
    // xAxis: [
    //   {
    //     type: 'category',
    //     data: ['8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30', '20:30'],
    //     axisTick: { alignWithLabel: true }, // 刻度居中核心代码
    //     axisLabel: {
    //       textStyle: {
    //         // color: 'black', // 修改X轴文字的颜色
    //         fontSize: '9', // 修改X轴文字大小
    //       }
    //     },
    //   },
    // ],
    xAxis: [  // 核心代码--双x轴刻度
      {
        data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],
        show: false,
      },
      {
        data: ['8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30', '20:30', '21:30'],
        position: 'bottom',
        boundaryGap: false,
        axisPointer: {
          show: false,
        },
        nameTextStyle: {
          color: '#999',
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          // interval: 0,
          // color: '#999999',
          textStyle: {
            color: 'red', // 修改X轴文字的颜色
            fontSize: '9', // 修改X轴文字大小
          }
        },
        splitLine: { // 背景竖着的刻度线
            show: true,
            lineStyle: {
                color: '#F1F1F1',
            },
        },
      },
    ],
    yAxis: [{
      type: 'value',
      splitLine: {    //网格线
        lineStyle: {
          type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
        },
        show: true //隐藏或显示
      }
    }],
    series: [{
      name: '直接访问', type: 'bar', barWidth: '60%', data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],

      itemStyle: {
        normal: {
          //这里是重点
          color: function (params) {
            // var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
            // return colorList[params.dataIndex]
            return '#0eb30e'
          }
        }
      }
    }],
  }

6.设置y轴区间，最大值最小值,显得数据波动很好~~~

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    yAxis: {
        type: 'value',
        min:50,
        max:300,
        splitNumber:10 // 好用切割成十份
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

7.dataZoom控制Y轴滚动

看图

option = {
  title: {
    text: '2011年世界人口总量',
    subtext: '数据来自网络',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  // legend: {
  //     data: ['2011年']
  // },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
  },
  yAxis: {
    type: 'category',
    inverse: true,
    data: [
      '巴西',
      '印尼',
      '美国',
      '印度',
      '中国',
      '世界人口(万)',
      '巴西1',
      '印1尼',
      '美1国',
      '印度1',
      '中1国',
      '世界1人口(万)',
    ],
  },
  dataZoom: [
    {
       show: false,
      zoomLock: true,
    },
    { type: 'slider',
      show: true,
      startValue: 0, // 控制显示几个数据
      endValue: 5, // 控制显示几个数据
      orient: 'vertical',
      showDetail: false, // 拖动时候滚动条上下是否显示详情
      showDataShadow: true,
      zoomLock: true,//设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
      backgroundColor: 'white',
      fillerColor: 'red', // 滚动条颜色
      handleSize: '10', // 滚动条上面的那个把手大小
      x2: 20, // 滚动条距离右边的距离
      width: 20, // 滚动条的宽度
      zoomOnMouseWheel:true,  //滚轮是否触发缩放
      moveOnMouseMove:true,  //鼠标滚轮触发滚动
      moveOnMouseWheel:true

    }
  ],
  series: [
    {
      name: '2011年',
      type: 'bar',
      data: [
        18203,
        23489,
        29034,
        104970,
        131744,
        630230,
        18203,
        23489,
        29034,
        104970,
        131744,
        630230,
      ],
    },
  ],
}

鼠标滚动控制Y轴数据上下移动

option = {
  title: {
    text: '2011年世界人口总量',
    subtext: '数据来自网络',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  // legend: {
  //     data: ['2011年']
  // },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
  },
  yAxis: {
    type: 'category',
    inverse: true,
    data: [
      '巴西',
      '印尼',
      '美国',
      '印度',
      '中国',
      '世界人口(万)',
      '巴西1',
      '印1尼',
      '美1国',
      '印度1',
      '中1国',
      '世界1人口(万)',
      '巴西12',
      '印12尼',
      '美12国',
      '印度12',
      '中12国',
      '世界12人口(万)',
    ],
  },
  dataZoom: [
    {
       show: false,
      zoomLock: false,
    },
    { type: 'inside', //改为slider的话就会出现滚动条，inside隐藏滚动条
      show: true,
      startValue: 0, // 控制显示几个数据
      endValue: 5, // 控制显示几个数据
      orient: 'vertical',
      showDetail: false, // 拖动时候滚动条上下是否显示详情
      showDataShadow: true,
    //   zoomLock: true,//设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
      backgroundColor: 'white',
      fillerColor: 'red', // 滚动条颜色
      handleSize: '10', // 滚动条上面的那个把手大小
      x2: 20, // 滚动条距离右边的距离
      width: 20, // 滚动条的宽度
      zoomOnMouseWheel:false,  //滚轮是否触发缩放，同时要设置zoomLock: false
      moveOnMouseMove:true,  //鼠标左键拖动触发滚动，同时要设置zoomLock: false
      moveOnMouseWheel:true // 鼠标滚轮带动滚动，同时要设置zoomLock: false
    }
  ],
  series: [
    {
      name: '2011年',
      type: 'bar',
      data: [
        18203,
        23489,
        29034,
        104970,
        131744,
        630230,
        18203,
        23489,
        29034,
        104970,
        131744,
        630230,
        18203,
        23489,
        29034,
        104970,
        131744,
        630230,
      ],
    },
  ],
}

折线图+离散图

option = {
    title: {
        text: '折线图+离散图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['最小值', '联盟广告', '最大值']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        // boundaryGap: false, // 控制折线图距离Y轴是否有距离
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日','周一1', '周二1', '周三1', '周四1', '周五1', '周六1', '周日1']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '最小值',
            type: 'line',
            symbol: "none", // 去掉折线上面的小圆点
            // stack: '总量', // 几个设置一样的会变成堆叠
            data: [100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100]
        },
        {
            name: '联盟广告',
            type: 'scatter',
            // stack: '总量', // 几个设置一样的会变成堆叠
            data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '最大值',
            type: 'line',
            // symbol: "none", // 去掉折线上面的小圆点
            // stack: '总量', // 几个设置一样的会变成堆叠
            data: [300, 300, 300, 300, 300, 300, 300,300, 300, 300, 300, 300, 300, 300]
        },
    ]
};

配置了横坐标旋转，同一个X轴所属柱子间距，非同一个X轴柱子间距，上下左右距离

option = {
  // 配置了横坐标旋转，同一个X轴所属柱子间距，非同一个X轴柱子间距，上下左右距离,以及横坐标部分涂色
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  grid: { top: '10%', left: '3%', right: '4%', bottom: '5%', containLabel: true },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval: 0,
      rotate: 90
    },
    data: [
      'Mon-TEST-TEST-TEST-TEST',
      'Tu-TEST-TEST-TEST-TESTe',
      'We-TEST-TEST-TEST-TESTd',
      'Th-TEST-TEST-TEST-TESTu',
      'Fr-TEST-TEST-TEST-TESTi',
      'Sa-TEST-TEST-TEST-TESTt',
      'S-TEST-TEST-TEST-TESTun'
    ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '蒸发量1',
      barWidth: 20, //设置柱子的宽度
      barGap: '0%' /*控制的是单个X坐标的多个柱子的间距*/,
      //   barCategoryGap:'0%',/*控制非自己孩子之间的间距*/
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    },
    {
      name: '蒸发量2',
      barWidth: 20, //设置柱子的宽度
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
}

饼图添加中间的数字

option = {
    title: {
        text: '1024',
        left: 'center',
        top: 'center',

            // center: ['50%', '50%'],
    },
     toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
        {
            type: 'pie',
            // radius: '65%',
            radius: [50, 80],
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
                {value: 100, name: '中'},
                {value: 200, name: '高'},
                {value: 50, name: '低'}
            ],
            emphasis: { // 这个是鼠标放上去时候的阴影
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 5,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

鼠标滚轮滚动移动数据，以及添加标识字

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
   toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
  // legend: {
  //     data: ['2011年']
  // },
  grid: {
    left: '3%',
    right: '8%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
  },
  yAxis: {
    type: 'category',
    inverse: true,
    data: [
      '巴西',
      '印尼',
      '美国',
      '印度',
      '中国',
      '世界人口(万)',
      '巴西1',
      '印1尼',
      '美1国',
      '印度1',
      '中1国',
      '世界1人口(万)',
      '巴西12',
      '印12尼',
      '美12国',
      '印度12',
      '中12国',
      '世界12人口(万)',
    ],
  },
  dataZoom: [
    {
       show: false,
    backgroundColor: 'red',
      zoomLock: false,
    },
    { type: 'inside', //改为slider的话就会出现滚动条，inside隐藏滚动条
      show: true,
      startValue: 0, // 控制显示几个数据
      endValue: 5, // 控制显示几个数据
      orient: 'vertical',
      showDetail: false, // 拖动时候滚动条上下是否显示详情
      showDataShadow: true,
    //   zoomLock: true,//设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
      backgroundColor: 'white',
      fillerColor: 'red', // 滚动条颜色
      handleSize: '10', // 滚动条上面的那个把手大小
      x2: 20, // 滚动条距离右边的距离
      width: 20, // 滚动条的宽度
      zoomOnMouseWheel:false,  //滚轮是否触发缩放，同时要设置zoomLock: false
      moveOnMouseMove:true,  //鼠标左键拖动触发滚动，同时要设置zoomLock: false
      moveOnMouseWheel:true // 鼠标滚轮带动滚动，同时要设置zoomLock: false
    }
  ],
  series: [
    {
      name: '2011年',
      type: 'bar',
      itemStyle: {
                color:  '#599fff' // 柱子的颜色
            },
             label: {
                show: true, // 柱子后面的字体
                precision: 1,
                position: 'right',
                valueAnimation: true,
                fontFamily: 'monospace'
            },
      data: [
        18203,
        23489,
        29034,
        104970,
        131744,
        630230,
        18203,
        23489,
        29034,
        104970,
        131744,
        630230,
        18203,
        23489,
        29034,
        104970,
        131744,
        630230,
      ],
    },
  ]
};

多种样式调节，X轴颜色Y轴颜色 、分割线颜色

option = {
  title: {
    text: 'XXX',
    x: 'center'
  },
  //color: colorArr,
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },

  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    y2: 140
  },
  xAxis: {
    type: 'category',
    name: '案例',
    data: [''],
    axisLabel: {
      interval: 0,//横轴信息全部显示
      rotate: -30,//-30度角倾斜显示
    },
    axisLine: {
      lineStyle: {
        color: 'red', // x轴颜色
        width: 1,//这里是为了突出显示加上的
      }
    }
  },

  yAxis: {
    type: 'value',
    name: '单位: 次',
    splitLine: {
      lineStyle: {
        // 使用深浅的间隔色
        color: ['#0087ED', 'blue', 'pink']
      }
    },
    nameTextStyle: {
      color: ['#ddddd'] // y轴的标识字
    },
    axisLine: {
      show: true, // 控制y轴这个线是否出来
      lineStyle: {
        color: 'purple', // y轴字体颜色
        width: 1,//这里是为了突出显示加上的
      }
    }
  },
  series: [{
    name: '这里放名字',
    type: 'bar',
    stack: '次数',
    label: {
      normal: {
        show: true,
        position: 'top'
      }
    },
    data: ['100'],
    color: ['#0087ED'],
    itemStyle: {
      normal: {
        barBorderRadius: 5,
      }
    },
    barWidth: 30,
  }]
};

修改标题到中间，调整大小

{
    title: {
      text: '1024',
      textStyle:{fontSize:50},
      left: 'center',
      top: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },
    series: [
      {
        type: 'pie',
        // radius: [120, 200],
radius: ['50%', '80%'], // 这个是按比例，上面那个是按固定值
        center: ['50%', '50%'],
        selectedMode: 'single',
        data: [
          { value: 100, name: '中' },
          { value: 200, name: '高' },
          { value: 50, name: '低' }
        ],
        emphasis: { // 这个是鼠标放上去时候的阴影
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 5,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

修改部分字体颜色

    let data1 = [150, 230, 224, 218, 147, 260, 500]
    option = {
      xAxis: {
        type: 'category',
        axisLabel: {
          color: function (value, index) {
            console.log(value, index)
            return data1[index] > 200 ? 'red' : 'blue'
          }
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{

        data: data1,
        type: 'line'
      }]
    };

修改柱状图每个柱子的颜色,根据数据橫坐標部分字體顏色，修改柱子間距

 myData = {
    nameData: [ // 橫坐標顯示的值
      'TEST-數據名字01',
      'TEST-數據名字02',
      'TEST-數據名字03',
      'TEST-數據名字04',
      'TEST-數據名字05',
      'TEST-數據名字06',
      'TEST-數據名字07'
    ],
    pData: [120, 200, 150, 80, 70, 110, 130],
    rData: [120, 0, 150, 80, 0, 110, 130]
  }
  option = {
       toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    legend: {
      data: ['Pr', 'Ro'],
      right: 20,
      itemHeight: 10,
      itemWidth: 10,
      itemGap: 30,
    },
    // 配置了横坐标旋转，同一个X轴所属柱子间距，非同一个X轴柱子间距，上下左右距离,以及横坐标部分涂色
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: { top: '10%', left: '3%', right: '4%', bottom: '5%', containLabel: true },
    xAxis: {
      type: 'category',

      axisLabel: {
        interval: 0,
        rotate: 90,
        color: (value, index) => {
          // 柱狀圖用紅色框線標出壓力值為0的設備Station ID ，若進行壓力參數名稱的點選，紅色框線隨之改變
          return this.myData.rData[index] === 0 ? 'red' : 'black'
        }
      },
      data: this.myData.nameData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Press',
        barWidth: 20, //设置柱子的宽度
        barGap: '0%' /*控制的是单个X坐标的多个柱子的间距*/,
        //   barCategoryGap:'0%',/*控制非自己孩子之间的间距*/
        data: this.myData.pData,
        itemStyle: {
          normal: {
            color: '#599fff'
          }
        },
        type: 'bar'
      },
      {
        name: 'Robot',
        barWidth: 20, //设置柱子的宽度
        data: this.myData.rData,
        itemStyle: {
          normal: {
            color: '#ffb752'
          }
        },
        type: 'bar'
      }
    ]
  }

修改echarts折线图拐点大小样式以及添加点点的边框，改变折线的样式

option = {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['6-8', '6-9', '6-10', '6-11', '6-12', '6-13', '6-14'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
            symbol: 'circle', //拐点设置为实心
            symbolSize: 8, //拐点大小
            animation: true, //false: hover圆点不缩放 .true:hover圆点默认缩放
            lineStyle: {
              normal: {
                color: '#599fff', //折线的颜色
                width: '2', //折线粗细
              },
            },
            itemStyle: {
              normal: {
                color: '#599fff', //拐点颜色
                borderColor: 'rgba(89, 159, 255, 0.24)', //拐点边框颜色
                borderWidth: 5, //拐点边框大小
              },
              //   emphasis: {
              //         color: '#000000'//hover拐点颜色定义
              //     }
            },
          },
        ],
      }

折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标hover时候的样式，用纵向阴影

// 折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标hover时候的样式，用纵向阴影
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          // 调整小图标图例的大小和位置
          data: ['蒸发量', '降水量', '百分比'],
          right: 20,
          itemHeight: 10,
          itemWidth: 10,
          itemGap: 30,
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
            axisPointer: {
              type: 'shadow',
            },
            axisLabel: {
              color: '#828c99', // x轴字体颜色
            },
            axisLine: {
              lineStyle: {
                color: '#d9d9d9', // x轴颜色
                width: 1, //这里是为了突出显示加上的
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            // name: '水量', 左侧y轴标题
            min: 0,
            max: 350,
            interval: 50,
            // axisLabel: { 左侧y轴单位
            //     formatter: '{value} ml'
            // }
          },
          {
            type: 'value',
            name: '百分比',
            min: 0,
            max: 35,
            interval: 5,
            axisLabel: {
              formatter: '{value} %',
            },
          },
        ],
        series: [
          {
            name: '蒸发量',
            type: 'bar',
            stack: '堆叠',
            itemStyle: {
              normal: {
                // 柱子颜色--蓝色
                color: '#599fff',
              },
            },
            data: [
              1.0,
              4.9,
              76.0,
              2.2,
              25.6,
              70.7,
              13.6,
              102.2,
              20.6,
              0.0,
              6.4,
              3.3,
            ],
          },
          {
            name: '降水量',
            type: 'bar',
            stack: '堆叠',
            itemStyle: {
              normal: {
                // 柱子颜色--黄色
                color: '#ffb752',
              },
            },
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              9.7,
              15.6,
              12.2,
              8.7,
              18.8,
              6.0,
              2.3,
            ],
          },
          {
            name: '百分比',
            type: 'line',
            itemStyle: {
              normal: {
                // 颜色
                color: '#599fff',
              },
            },
            label: {
              show: true,
              position: 'top',
            },
            yAxisIndex: 1,
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2,
            ],
          },
        ],
      }

去除饼图标注省略号配置

option = {
    title: {
      text: '2323',
      textStyle: { fontSize: 26 },
      left: 'center',
      top: 'center',
    },

    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} {d}%',
    },
    series: [
      {
        type: 'pie',
        radius: ['28%', '50%'],
        label: {
              alignTo: 'edge', // 去除标注省略号配置
                edgeDistance: 5, // 去除标注省略号配置
                lineHeight:20, // 去除标注省略号配置
          formatter: '{b} :\n {c} {d}%', // 去除标注省略号配置
      },
        data: [
          { value: 100, name: '中' },
          { value: 200, name: '高' },
          { value: 50, name: '低' },
        ],
        emphasis: {
          // 这个是鼠标放上去时候的阴影
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 5,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };

修改饼图颜色

option = {
    title: {
      text: '2323',
      textStyle: { fontSize: 26 },
      left: 'center',
      top: 'center',
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} {d}%',
    },
    series: [
      {
        type: 'pie',
        radius: ['28%', '50%'],
        label: {
              alignTo: 'edge', // 去除标注省略号配置
                edgeDistance: 5, // 去除标注省略号配置
                lineHeight:20, // 去除标注省略号配置
          formatter: '{b} :\n {c} {d}%', // 去除标注省略号配置
      },
        data: [
          { value: 100, name: '中',itemStyle: {color:"orange"} },
          { value: 200, name: '高' ,itemStyle: {color:"red"}},
          { value: 50, name: '低' ,itemStyle: {color:"blue"}},
        ],
        emphasis: {
          // 这个是鼠标放上去时候的阴影
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 5,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };