上面先说注意事项

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

  1. <!-- 饼图組件 -->
  2. <div class="chart01" echarts #myEchart01 [options]="option01"></div>
  3. .chart01{
  4.   width: 23.426vw;
  5.   height: 21.523vw;
  6. }
  8. import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
  9. import { NgxEchartsService } from 'ngx-echarts';
  10. @Component({
  11.   selector: 'app-echart04',
  12.   templateUrl: './echart04.component.html',
  13.   styleUrls: ['./echart04.component.less']
  14. })
  15. export class Echart04Component implements OnInit {
  17.   constructor(
  19.     private es: NgxEchartsService,
  20.   ) { }
  22.   ngOnInit(): void {
  23.   }
  25.   ngAfterViewInit() {
  26.     this.setEcharts01()
  27.   }
  28.   @ViewChild('myEchart01', { static: false }) myEchart01: ElementRef;
  29.   option01 = {
  30.     title: {
  31.       text: '2323',
  32.       textStyle: { fontSize: 26 },
  33.       left: 'center',
  34.       top: 'center',
  35.     },
  36.     tooltip: {
  37.       trigger: 'item',
  38.       formatter: '{b} : {c} ({d}%)',
  39.     },
  40.     series: [
  41.       {
  42.         type: 'pie',
  43.         radius: ['34%', '57%'],
  44.         center: ['50%', '50%'],
  45.         selectedMode: 'single',
  46.         data: [
  47.           { value: 100, name: '中' },
  48.           { value: 200, name: '高' },
  49.           { value: 50, name: '低' },
  50.         ],
  51.         emphasis: {
  52.           // 这个是鼠标放上去时候的阴影
  53.           itemStyle: {
  54.             shadowBlur: 10,
  55.             shadowOffsetX: 5,
  56.             shadowColor: 'rgba(0, 0, 0, 0.5)',
  57.           },
  58.         },
  59.       },
  60.     ],
  61.   };
  62.   setEcharts01() {
  63.     this.es.getInstanceByDom(this.myEchart01.nativeElement).setOption(this.option01);
  64.   }
  65. }

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

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

  1. option = {
  2.     title: {
  3.         text: '某站点用户访问来源',
  4.         subtext: '纯属虚构',
  5.         left: 'center'
  6.     },
  7.     tooltip: {
  8.         trigger: 'item'
  9.     },
  10.     legend: {
  11.         orient: 'vertical',
  12.         left: 'left',
  13.     },
  14.     series : [  // 把饼图挪到了左边
  15.         {
  16.             name: '访问来源',
  17.             type: 'pie',
  18.             radius : '55%',
  19.             center: ['30%', '50%'],  //  这个代码~~
  20.             data:[
  21.                 {value:335, name:'直接访问'},
  22.                 {value:310, name:'邮件营销'},
  23.                 {value:234, name:'联盟广告'},
  24.                 {value:135, name:'视频广告'},
  25.                 {value:1548, name:'搜索引擎'}
  26.             ],
  27.             itemStyle: {
  28.                 emphasis: {
  29.                     shadowBlur: 10,
  30.                     shadowOffsetX: 0,
  31.                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  32.                 }
  33.             }
  34.         }
  35.     ]
  36. };
  37.     ]

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

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

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

  1. yAxis: {
  2.     splitLine :{    //网格线
  3.         lineStyle:{
  4.             type:'dashed'    //设置网格线类型 dotted：虚线   solid:实线
  5.         },
  6.         show:true //隐藏或显示
  7.     }
  8. }

4.x轴刻度居中

  1. option = {
  2.     tooltip: {
  3.       trigger: 'axis',
  4.       axisPointer: {
  5.         // 坐标轴指示器，坐标轴触发有效
  6.         type: 'shadow',
  7.         // 默认为直线，可选为：'line' | 'shadow'
  8.       },
  9.     },
  10.     toolbox: {
  11.         show: true,
  12.         feature: {
  13.             dataView: {readOnly: false},
  14.             restore: {},
  15.             saveAsImage: {}
  16.         }
  17.     },
  18.     grid: { top: '12%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
  19.     xAxis: [
  20.       {
  21.         type: 'category',
  22.         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'],
  23.         axisTick: { alignWithLabel: true }, // 刻度居中核心代码
  24.         axisLabel: {
  25.           textStyle: {
  26.             // color: 'black', // 修改X轴文字的颜色
  27.             fontSize: '9', // 修改X轴文字大小
  28.           }
  29.         },
  30.       },
  31.     ],
  32.     // xAxis: [
  33.     //   {
  34.     //     data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],
  35.     //     show: false,
  36.     //   },
  37.     //   {
  38.     //     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'],
  39.     //     position: 'bottom',
  40.     //     boundaryGap: false,
  41.     //     axisPointer: {
  42.     //       show: false,
  43.     //     },
  44.     //     nameTextStyle: {
  45.     //       color: '#999',
  46.     //     },
  47.     //     axisLine: {
  48.     //       show: false,
  49.     //     },
  50.     //     axisTick: {
  51.     //       show: false,
  52.     //     },
  53.     //     axisLabel: {
  54.     //       // interval: 0,
  55.     //       // color: '#999999',
  56.     //       textStyle: {
  57.     //         color: 'red', // 修改X轴文字的颜色
  58.     //         fontSize: '9', // 修改X轴文字大小
  59.     //       }
  60.     //     },
  61.     //     // splitLine: { // 背景竖着的刻度线
  62.     //     //     show: true,
  63.     //     //     lineStyle: {
  64.     //     //         color: '#F1F1F1',
  65.     //     //     },
  66.     //     // },
  67.     //   },
  68.     // ],
  69.     yAxis: [{
  70.       type: 'value',
  71.       splitLine: {    //网格线
  72.         lineStyle: {
  73.           type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
  74.         },
  75.         show: true //隐藏或显示
  76.       }
  77.     }],
  78.     series: [{
  79.       name: '直接访问', type: 'bar', barWidth: '60%', data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],
  81.       itemStyle: {
  82.         normal: {
  83.           //这里是重点
  84.           color: function (params) {
  85.             // var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
  86.             // return colorList[params.dataIndex]
  87.             return '#0eb30e'
  88.           }
  89.         }
  90.       }
  91.     }],
  92.   }

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

  1. option = {
  2.     tooltip: {
  3.       trigger: 'axis',
  4.       axisPointer: {
  5.         // 坐标轴指示器，坐标轴触发有效
  6.         type: 'shadow',
  7.         // 默认为直线，可选为：'line' | 'shadow'
  8.       },
  9.     },
  10.     toolbox: {
  11.         show: true,
  12.         feature: {
  13.             dataView: {readOnly: false},
  14.             restore: {},
  15.             saveAsImage: {}
  16.         }
  17.     },
  18.     grid: { top: '12%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
  19.     // xAxis: [
  20.     //   {
  21.     //     type: 'category',
  22.     //     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'],
  23.     //     axisTick: { alignWithLabel: true }, // 刻度居中核心代码
  24.     //     axisLabel: {
  25.     //       textStyle: {
  26.     //         // color: 'black', // 修改X轴文字的颜色
  27.     //         fontSize: '9', // 修改X轴文字大小
  28.     //       }
  29.     //     },
  30.     //   },
  31.     // ],
  32.     xAxis: [  // 核心代码--双x轴刻度
  33.       {
  34.         data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],
  35.         show: false,
  36.       },
  37.       {
  38.         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'],
  39.         position: 'bottom',
  40.         boundaryGap: false,
  41.         axisPointer: {
  42.           show: false,
  43.         },
  44.         nameTextStyle: {
  45.           color: '#999',
  46.         },
  47.         axisLine: {
  48.           show: false,
  49.         },
  50.         axisTick: {
  51.           show: false,
  52.         },
  53.         axisLabel: {
  54.           // interval: 0,
  55.           // color: '#999999',
  56.           textStyle: {
  57.             color: 'red', // 修改X轴文字的颜色
  58.             fontSize: '9', // 修改X轴文字大小
  59.           }
  60.         },
  61.         splitLine: { // 背景竖着的刻度线
  62.             show: true,
  63.             lineStyle: {
  64.                 color: '#F1F1F1',
  65.             },
  66.         },
  67.       },
  68.     ],
  69.     yAxis: [{
  70.       type: 'value',
  71.       splitLine: {    //网格线
  72.         lineStyle: {
  73.           type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
  74.         },
  75.         show: true //隐藏或显示
  76.       }
  77.     }],
  78.     series: [{
  79.       name: '直接访问', type: 'bar', barWidth: '60%', data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],
  81.       itemStyle: {
  82.         normal: {
  83.           //这里是重点
  84.           color: function (params) {
  85.             // var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
  86.             // return colorList[params.dataIndex]
  87.             return '#0eb30e'
  88.           }
  89.         }
  90.       }
  91.     }],
  92.   }

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

  1. option = {
  2.     xAxis: {
  3.         type: 'category',
  4.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  5.     },
  6.     toolbox: {
  7.         feature: {
  8.             saveAsImage: {}
  9.         }
  10.     },
  11.     yAxis: {
  12.         type: 'value',
  13.         min:50,
  14.         max:300,
  15.         splitNumber:10 // 好用切割成十份
  16.     },
  17.     series: [{
  18.         data: [150, 230, 224, 218, 135, 147, 260],
  19.         type: 'line'
  20.     }]
  21. };

7.dataZoom控制Y轴滚动

看图

  1. option = {
  2.   title: {
  3.     text: '2011年世界人口总量',
  4.     subtext: '数据来自网络',
  5.   },
  6.   tooltip: {
  7.     trigger: 'axis',
  8.     axisPointer: {
  9.       type: 'shadow',
  10.     },
  11.   },
  12.   // legend: {
  13.   //     data: ['2011年']
  14.   // },
  15.   grid: {
  16.     left: '3%',
  17.     right: '4%',
  18.     bottom: '3%',
  19.     containLabel: true,
  20.   },
  21.   xAxis: {
  22.     type: 'value',
  23.     boundaryGap: [0, 0.01],
  24.   },
  25.   yAxis: {
  26.     type: 'category',
  27.     inverse: true,
  28.     data: [
  29.       '巴西',
  30.       '印尼',
  31.       '美国',
  32.       '印度',
  33.       '中国',
  34.       '世界人口(万)',
  35.       '巴西1',
  36.       '印1尼',
  37.       '美1国',
  38.       '印度1',
  39.       '中1国',
  40.       '世界1人口(万)',
  41.     ],
  42.   },
  43.   dataZoom: [
  44.     {
  45.        show: false,
  46.       zoomLock: true,
  47.     },
  48.     { type: 'slider',
  49.       show: true,
  50.       startValue: 0, // 控制显示几个数据
  51.       endValue: 5, // 控制显示几个数据
  52.       orient: 'vertical',
  53.       showDetail: false, // 拖动时候滚动条上下是否显示详情
  54.       showDataShadow: true,
  55.       zoomLock: true,//设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
  56.       backgroundColor: 'white',
  57.       fillerColor: 'red', // 滚动条颜色
  58.       handleSize: '10', // 滚动条上面的那个把手大小
  59.       x2: 20, // 滚动条距离右边的距离
  60.       width: 20, // 滚动条的宽度
  61.       zoomOnMouseWheel:true,  //滚轮是否触发缩放
  62.       moveOnMouseMove:true,  //鼠标滚轮触发滚动
  63.       moveOnMouseWheel:true
  65.     }
  66.   ],
  67.   series: [
  68.     {
  69.       name: '2011年',
  70.       type: 'bar',
  71.       data: [
  72.         18203,
  73.         23489,
  74.         29034,
  75.         104970,
  76.         131744,
  77.         630230,
  78.         18203,
  79.         23489,
  80.         29034,
  81.         104970,
  82.         131744,
  83.         630230,
  84.       ],
  85.     },
  86.   ],
  87. }

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

  1. option = {
  2.   title: {
  3.     text: '2011年世界人口总量',
  4.     subtext: '数据来自网络',
  5.   },
  6.   tooltip: {
  7.     trigger: 'axis',
  8.     axisPointer: {
  9.       type: 'shadow',
  10.     },
  11.   },
  12.   // legend: {
  13.   //     data: ['2011年']
  14.   // },
  15.   grid: {
  16.     left: '3%',
  17.     right: '4%',
  18.     bottom: '3%',
  19.     containLabel: true,
  20.   },
  21.   xAxis: {
  22.     type: 'value',
  23.     boundaryGap: [0, 0.01],
  24.   },
  25.   yAxis: {
  26.     type: 'category',
  27.     inverse: true,
  28.     data: [
  29.       '巴西',
  30.       '印尼',
  31.       '美国',
  32.       '印度',
  33.       '中国',
  34.       '世界人口(万)',
  35.       '巴西1',
  36.       '印1尼',
  37.       '美1国',
  38.       '印度1',
  39.       '中1国',
  40.       '世界1人口(万)',
  41.       '巴西12',
  42.       '印12尼',
  43.       '美12国',
  44.       '印度12',
  45.       '中12国',
  46.       '世界12人口(万)',
  47.     ],
  48.   },
  49.   dataZoom: [
  50.     {
  51.        show: false,
  52.       zoomLock: false,
  53.     },
  54.     { type: 'inside', //改为slider的话就会出现滚动条，inside隐藏滚动条
  55.       show: true,
  56.       startValue: 0, // 控制显示几个数据
  57.       endValue: 5, // 控制显示几个数据
  58.       orient: 'vertical',
  59.       showDetail: false, // 拖动时候滚动条上下是否显示详情
  60.       showDataShadow: true,
  61.     //   zoomLock: true,//设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
  62.       backgroundColor: 'white',
  63.       fillerColor: 'red', // 滚动条颜色
  64.       handleSize: '10', // 滚动条上面的那个把手大小
  65.       x2: 20, // 滚动条距离右边的距离
  66.       width: 20, // 滚动条的宽度
  67.       zoomOnMouseWheel:false,  //滚轮是否触发缩放，同时要设置zoomLock: false
  68.       moveOnMouseMove:true,  //鼠标左键拖动触发滚动，同时要设置zoomLock: false
  69.       moveOnMouseWheel:true // 鼠标滚轮带动滚动，同时要设置zoomLock: false
  70.     }
  71.   ],
  72.   series: [
  73.     {
  74.       name: '2011年',
  75.       type: 'bar',
  76.       data: [
  77.         18203,
  78.         23489,
  79.         29034,
  80.         104970,
  81.         131744,
  82.         630230,
  83.         18203,
  84.         23489,
  85.         29034,
  86.         104970,
  87.         131744,
  88.         630230,
  89.         18203,
  90.         23489,
  91.         29034,
  92.         104970,
  93.         131744,
  94.         630230,
  95.       ],
  96.     },
  97.   ],
  98. }

折线图+离散图

  1. option = {
  2.     title: {
  3.         text: '折线图+离散图'
  4.     },
  5.     tooltip: {
  6.         trigger: 'axis'
  7.     },
  8.     legend: {
  9.         data: ['最小值', '联盟广告', '最大值']
  10.     },
  11.     grid: {
  12.         left: '3%',
  13.         right: '4%',
  14.         bottom: '3%',
  15.         containLabel: true
  16.     },
  17.     toolbox: {
  18.         feature: {
  19.             saveAsImage: {}
  20.         }
  21.     },
  22.     xAxis: {
  23.         type: 'category',
  24.         // boundaryGap: false, // 控制折线图距离Y轴是否有距离
  25.         data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日','周一1', '周二1', '周三1', '周四1', '周五1', '周六1', '周日1']
  26.     },
  27.     yAxis: {
  28.         type: 'value'
  29.     },
  30.     series: [
  31.         {
  32.             name: '最小值',
  33.             type: 'line',
  34.             symbol: "none", // 去掉折线上面的小圆点
  35.             // stack: '总量', // 几个设置一样的会变成堆叠
  36.             data: [100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100]
  37.         },
  38.         {
  39.             name: '联盟广告',
  40.             type: 'scatter',
  41.             // stack: '总量', // 几个设置一样的会变成堆叠
  42.             data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
  43.         },
  44.         {
  45.             name: '最大值',
  46.             type: 'line',
  47.             // symbol: "none", // 去掉折线上面的小圆点
  48.             // stack: '总量', // 几个设置一样的会变成堆叠
  49.             data: [300, 300, 300, 300, 300, 300, 300,300, 300, 300, 300, 300, 300, 300]
  50.         },
  51.     ]
  52. };

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

  1. option = {
  2.   // 配置了横坐标旋转，同一个X轴所属柱子间距，非同一个X轴柱子间距，上下左右距离,以及横坐标部分涂色
  3.   tooltip: {
  4.     trigger: 'axis',
  5.     axisPointer: {
  6.       type: 'cross',
  7.       crossStyle: {
  8.         color: '#999'
  9.       }
  10.     }
  11.   },
  12.   grid: { top: '10%', left: '3%', right: '4%', bottom: '5%', containLabel: true },
  13.   xAxis: {
  14.     type: 'category',
  15.     axisLabel: {
  16.       interval: 0,
  17.       rotate: 90
  18.     },
  19.     data: [
  20.       'Mon-TEST-TEST-TEST-TEST',
  21.       'Tu-TEST-TEST-TEST-TESTe',
  22.       'We-TEST-TEST-TEST-TESTd',
  23.       'Th-TEST-TEST-TEST-TESTu',
  24.       'Fr-TEST-TEST-TEST-TESTi',
  25.       'Sa-TEST-TEST-TEST-TESTt',
  26.       'S-TEST-TEST-TEST-TESTun'
  27.     ]
  28.   },
  29.   yAxis: {
  30.     type: 'value'
  31.   },
  32.   series: [
  33.     {
  34.       name: '蒸发量1',
  35.       barWidth: 20, //设置柱子的宽度
  36.       barGap: '0%' /*控制的是单个X坐标的多个柱子的间距*/,
  37.       //   barCategoryGap:'0%',/*控制非自己孩子之间的间距*/
  38.       data: [120, 200, 150, 80, 70, 110, 130],
  39.       type: 'bar'
  40.     },
  41.     {
  42.       name: '蒸发量2',
  43.       barWidth: 20, //设置柱子的宽度
  44.       data: [120, 200, 150, 80, 70, 110, 130],
  45.       type: 'bar'
  46.     }
  47.   ]
  48. }

饼图添加中间的数字

  1. option = {
  2.     title: {
  3.         text: '1024',
  4.         left: 'center',
  5.         top: 'center',
  7.             // center: ['50%', '50%'],
  8.     },
  9.      toolbox: {
  10.         show: true,
  11.         feature: {
  12.             mark: {show: true},
  13.             dataView: {show: true, readOnly: false},
  14.             restore: {show: true},
  15.             saveAsImage: {show: true}
  16.         }
  17.     },
  18.     tooltip: {
  19.         trigger: 'item',
  20.         formatter: '{a} <br/>{b} : {c} ({d}%)'
  21.     },
  22.     series: [
  23.         {
  24.             type: 'pie',
  25.             // radius: '65%',
  26.             radius: [50, 80],
  27.             center: ['50%', '50%'],
  28.             selectedMode: 'single',
  29.             data: [
  30.                 {value: 100, name: '中'},
  31.                 {value: 200, name: '高'},
  32.                 {value: 50, name: '低'}
  33.             ],
  34.             emphasis: { // 这个是鼠标放上去时候的阴影
  35.                 itemStyle: {
  36.                     shadowBlur: 10,
  37.                     shadowOffsetX: 5,
  38.                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  39.                 }
  40.             }
  41.         }
  42.     ]
  43. };

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


  2. option = {
  3.   tooltip: {
  4.     trigger: 'axis',
  5.     axisPointer: {
  6.       type: 'shadow',
  7.     },
  8.   },
  9.    toolbox: {
  10.         feature: {
  11.             saveAsImage: {}
  12.         }
  13.     },
  14.   // legend: {
  15.   //     data: ['2011年']
  16.   // },
  17.   grid: {
  18.     left: '3%',
  19.     right: '8%',
  20.     bottom: '3%',
  21.     containLabel: true,
  22.   },
  23.   xAxis: {
  24.     type: 'value',
  25.     boundaryGap: [0, 0.01],
  26.   },
  27.   yAxis: {
  28.     type: 'category',
  29.     inverse: true,
  30.     data: [
  31.       '巴西',
  32.       '印尼',
  33.       '美国',
  34.       '印度',
  35.       '中国',
  36.       '世界人口(万)',
  37.       '巴西1',
  38.       '印1尼',
  39.       '美1国',
  40.       '印度1',
  41.       '中1国',
  42.       '世界1人口(万)',
  43.       '巴西12',
  44.       '印12尼',
  45.       '美12国',
  46.       '印度12',
  47.       '中12国',
  48.       '世界12人口(万)',
  49.     ],
  50.   },
  51.   dataZoom: [
  52.     {
  53.        show: false,
  54.     backgroundColor: 'red',
  55.       zoomLock: false,
  56.     },
  57.     { type: 'inside', //改为slider的话就会出现滚动条，inside隐藏滚动条
  58.       show: true,
  59.       startValue: 0, // 控制显示几个数据
  60.       endValue: 5, // 控制显示几个数据
  61.       orient: 'vertical',
  62.       showDetail: false, // 拖动时候滚动条上下是否显示详情
  63.       showDataShadow: true,
  64.     //   zoomLock: true,//设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
  65.       backgroundColor: 'white',
  66.       fillerColor: 'red', // 滚动条颜色
  67.       handleSize: '10', // 滚动条上面的那个把手大小
  68.       x2: 20, // 滚动条距离右边的距离
  69.       width: 20, // 滚动条的宽度
  70.       zoomOnMouseWheel:false,  //滚轮是否触发缩放，同时要设置zoomLock: false
  71.       moveOnMouseMove:true,  //鼠标左键拖动触发滚动，同时要设置zoomLock: false
  72.       moveOnMouseWheel:true // 鼠标滚轮带动滚动，同时要设置zoomLock: false
  73.     }
  74.   ],
  75.   series: [
  76.     {
  77.       name: '2011年',
  78.       type: 'bar',
  79.       itemStyle: {
  80.                 color:  '#599fff' // 柱子的颜色
  81.             },
  82.              label: {
  83.                 show: true, // 柱子后面的字体
  84.                 precision: 1,
  85.                 position: 'right',
  86.                 valueAnimation: true,
  87.                 fontFamily: 'monospace'
  88.             },
  89.       data: [
  90.         18203,
  91.         23489,
  92.         29034,
  93.         104970,
  94.         131744,
  95.         630230,
  96.         18203,
  97.         23489,
  98.         29034,
  99.         104970,
  100.         131744,
  101.         630230,
  102.         18203,
  103.         23489,
  104.         29034,
  105.         104970,
  106.         131744,
  107.         630230,
  108.       ],
  109.     },
  110.   ]
  111. };

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


  2. option = {
  3.   title: {
  4.     text: 'XXX',
  5.     x: 'center'
  6.   },
  7.   //color: colorArr,
  8.   tooltip: {
  9.     trigger: 'axis',
  10.     axisPointer: { // 坐标轴指示器，坐标轴触发有效
  11.       type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
  12.     }
  13.   },
  15.   toolbox: {
  16.     feature: {
  17.       saveAsImage: {}
  18.     }
  19.   },
  20.   grid: {
  21.     y2: 140
  22.   },
  23.   xAxis: {
  24.     type: 'category',
  25.     name: '案例',
  26.     data: [''],
  27.     axisLabel: {
  28.       interval: 0,//横轴信息全部显示
  29.       rotate: -30,//-30度角倾斜显示
  30.     },
  31.     axisLine: {
  32.       lineStyle: {
  33.         color: 'red', // x轴颜色
  34.         width: 1,//这里是为了突出显示加上的
  35.       }
  36.     }
  37.   },
  39.   yAxis: {
  40.     type: 'value',
  41.     name: '单位: 次',
  42.     splitLine: {
  43.       lineStyle: {
  44.         // 使用深浅的间隔色
  45.         color: ['#0087ED', 'blue', 'pink']
  46.       }
  47.     },
  48.     nameTextStyle: {
  49.       color: ['#ddddd'] // y轴的标识字
  50.     },
  51.     axisLine: {
  52.       show: true, // 控制y轴这个线是否出来
  53.       lineStyle: {
  54.         color: 'purple', // y轴字体颜色
  55.         width: 1,//这里是为了突出显示加上的
  56.       }
  57.     }
  58.   },
  59.   series: [{
  60.     name: '这里放名字',
  61.     type: 'bar',
  62.     stack: '次数',
  63.     label: {
  64.       normal: {
  65.         show: true,
  66.         position: 'top'
  67.       }
  68.     },
  69.     data: ['100'],
  70.     color: ['#0087ED'],
  71.     itemStyle: {
  72.       normal: {
  73.         barBorderRadius: 5,
  74.       }
  75.     },
  76.     barWidth: 30,
  77.   }]
  78. };

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

  1. {
  2.     title: {
  3.       text: '1024',
  4.       textStyle:{fontSize:50},
  5.       left: 'center',
  6.       top: 'center',
  7.     },
  8.     tooltip: {
  9.       trigger: 'item',
  10.       formatter: '{b} : {c} ({d}%)'
  11.     },
  12.     series: [
  13.       {
  14.         type: 'pie',
  15.         // radius: [120, 200],
  16. radius: ['50%', '80%'], // 这个是按比例，上面那个是按固定值
  17.         center: ['50%', '50%'],
  18.         selectedMode: 'single',
  19.         data: [
  20.           { value: 100, name: '中' },
  21.           { value: 200, name: '高' },
  22.           { value: 50, name: '低' }
  23.         ],
  24.         emphasis: { // 这个是鼠标放上去时候的阴影
  25.           itemStyle: {
  26.             shadowBlur: 10,
  27.             shadowOffsetX: 5,
  28.             shadowColor: 'rgba(0, 0, 0, 0.5)'
  29.           }
  30.         }
  31.       }
  32.     ]
  33.   };

修改部分字体颜色


  2.     let data1 = [150, 230, 224, 218, 147, 260, 500]
  3.     option = {
  4.       xAxis: {
  5.         type: 'category',
  6.         axisLabel: {
  7.           color: function (value, index) {
  8.             console.log(value, index)
  9.             return data1[index] > 200 ? 'red' : 'blue'
  10.           }
  11.         },
  12.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  13.       },
  14.       yAxis: {
  15.         type: 'value'
  16.       },
  17.       series: [{
  19.         data: data1,
  20.         type: 'line'
  21.       }]
  22.     };

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

  1.  myData = {
  2.     nameData: [ // 橫坐標顯示的值
  3.       'TEST-數據名字01',
  4.       'TEST-數據名字02',
  5.       'TEST-數據名字03',
  6.       'TEST-數據名字04',
  7.       'TEST-數據名字05',
  8.       'TEST-數據名字06',
  9.       'TEST-數據名字07'
  10.     ],
  11.     pData: [120, 200, 150, 80, 70, 110, 130],
  12.     rData: [120, 0, 150, 80, 0, 110, 130]
  13.   }
  14.   option = {
  15.        toolbox: {
  16.         feature: {
  17.             saveAsImage: {}
  18.         }
  19.     },
  20.     legend: {
  21.       data: ['Pr', 'Ro'],
  22.       right: 20,
  23.       itemHeight: 10,
  24.       itemWidth: 10,
  25.       itemGap: 30,
  26.     },
  27.     // 配置了横坐标旋转，同一个X轴所属柱子间距，非同一个X轴柱子间距，上下左右距离,以及横坐标部分涂色
  28.     tooltip: {
  29.       trigger: 'axis',
  30.       axisPointer: {
  31.         type: 'cross',
  32.         crossStyle: {
  33.           color: '#999'
  34.         }
  35.       }
  36.     },
  37.     grid: { top: '10%', left: '3%', right: '4%', bottom: '5%', containLabel: true },
  38.     xAxis: {
  39.       type: 'category',
  41.       axisLabel: {
  42.         interval: 0,
  43.         rotate: 90,
  44.         color: (value, index) => {
  45.           // 柱狀圖用紅色框線標出壓力值為0的設備Station ID ，若進行壓力參數名稱的點選，紅色框線隨之改變
  46.           return this.myData.rData[index] === 0 ? 'red' : 'black'
  47.         }
  48.       },
  49.       data: this.myData.nameData
  50.     },
  51.     yAxis: {
  52.       type: 'value'
  53.     },
  54.     series: [
  55.       {
  56.         name: 'Press',
  57.         barWidth: 20, //设置柱子的宽度
  58.         barGap: '0%' /*控制的是单个X坐标的多个柱子的间距*/,
  59.         //   barCategoryGap:'0%',/*控制非自己孩子之间的间距*/
  60.         data: this.myData.pData,
  61.         itemStyle: {
  62.           normal: {
  63.             color: '#599fff'
  64.           }
  65.         },
  66.         type: 'bar'
  67.       },
  68.       {
  69.         name: 'Robot',
  70.         barWidth: 20, //设置柱子的宽度
  71.         data: this.myData.rData,
  72.         itemStyle: {
  73.           normal: {
  74.             color: '#ffb752'
  75.           }
  76.         },
  77.         type: 'bar'
  78.       }
  79.     ]
  80.   }

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

  1. option = {
  2.         tooltip: {
  3.           trigger: 'axis',
  4.         },
  5.         xAxis: {
  6.           type: 'category',
  7.           data: ['6-8', '6-9', '6-10', '6-11', '6-12', '6-13', '6-14'],
  8.         },
  9.         yAxis: {
  10.           type: 'value',
  11.         },
  12.         series: [
  13.           {
  14.             data: [150, 230, 224, 218, 135, 147, 260],
  15.             type: 'line',
  16.             symbol: 'circle', //拐点设置为实心
  17.             symbolSize: 8, //拐点大小
  18.             animation: true, //false: hover圆点不缩放 .true:hover圆点默认缩放
  19.             lineStyle: {
  20.               normal: {
  21.                 color: '#599fff', //折线的颜色
  22.                 width: '2', //折线粗细
  23.               },
  24.             },
  25.             itemStyle: {
  26.               normal: {
  27.                 color: '#599fff', //拐点颜色
  28.                 borderColor: 'rgba(89, 159, 255, 0.24)', //拐点边框颜色
  29.                 borderWidth: 5, //拐点边框大小
  30.               },
  31.               //   emphasis: {
  32.               //         color: '#000000'//hover拐点颜色定义
  33.               //     }
  34.             },
  35.           },
  36.         ],
  37.       }

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

  1. // 折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标hover时候的样式，用纵向阴影
  2.       option = {
  3.         tooltip: {
  4.           trigger: 'axis',
  5.           axisPointer: {
  6.             // 坐标轴指示器，坐标轴触发有效
  7.             type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
  8.           },
  9.         },
  10.         legend: {
  11.           // 调整小图标图例的大小和位置
  12.           data: ['蒸发量', '降水量', '百分比'],
  13.           right: 20,
  14.           itemHeight: 10,
  15.           itemWidth: 10,
  16.           itemGap: 30,
  17.         },
  18.         xAxis: [
  19.           {
  20.             type: 'category',
  21.             data: [
  22.               '1月',
  23.               '2月',
  24.               '3月',
  25.               '4月',
  26.               '5月',
  27.               '6月',
  28.               '7月',
  29.               '8月',
  30.               '9月',
  31.               '10月',
  32.               '11月',
  33.               '12月',
  34.             ],
  35.             axisPointer: {
  36.               type: 'shadow',
  37.             },
  38.             axisLabel: {
  39.               color: '#828c99', // x轴字体颜色
  40.             },
  41.             axisLine: {
  42.               lineStyle: {
  43.                 color: '#d9d9d9', // x轴颜色
  44.                 width: 1, //这里是为了突出显示加上的
  45.               },
  46.             },
  47.           },
  48.         ],
  49.         yAxis: [
  50.           {
  51.             type: 'value',
  52.             // name: '水量', 左侧y轴标题
  53.             min: 0,
  54.             max: 350,
  55.             interval: 50,
  56.             // axisLabel: { 左侧y轴单位
  57.             //     formatter: '{value} ml'
  58.             // }
  59.           },
  60.           {
  61.             type: 'value',
  62.             name: '百分比',
  63.             min: 0,
  64.             max: 35,
  65.             interval: 5,
  66.             axisLabel: {
  67.               formatter: '{value} %',
  68.             },
  69.           },
  70.         ],
  71.         series: [
  72.           {
  73.             name: '蒸发量',
  74.             type: 'bar',
  75.             stack: '堆叠',
  76.             itemStyle: {
  77.               normal: {
  78.                 // 柱子颜色--蓝色
  79.                 color: '#599fff',
  80.               },
  81.             },
  82.             data: [
  83.               1.0,
  84.               4.9,
  85.               76.0,
  86.               2.2,
  87.               25.6,
  88.               70.7,
  89.               13.6,
  90.               102.2,
  91.               20.6,
  92.               0.0,
  93.               6.4,
  94.               3.3,
  95.             ],
  96.           },
  97.           {
  98.             name: '降水量',
  99.             type: 'bar',
  100.             stack: '堆叠',
  101.             itemStyle: {
  102.               normal: {
  103.                 // 柱子颜色--黄色
  104.                 color: '#ffb752',
  105.               },
  106.             },
  107.             data: [
  108.               2.6,
  109.               5.9,
  110.               9.0,
  111.               26.4,
  112.               28.7,
  113.               9.7,
  114.               15.6,
  115.               12.2,
  116.               8.7,
  117.               18.8,
  118.               6.0,
  119.               2.3,
  120.             ],
  121.           },
  122.           {
  123.             name: '百分比',
  124.             type: 'line',
  125.             itemStyle: {
  126.               normal: {
  127.                 // 颜色
  128.                 color: '#599fff',
  129.               },
  130.             },
  131.             label: {
  132.               show: true,
  133.               position: 'top',
  134.             },
  135.             yAxisIndex: 1,
  136.             data: [
  137.               2.0,
  138.               2.2,
  139.               3.3,
  140.               4.5,
  141.               6.3,
  142.               10.2,
  143.               20.3,
  144.               23.4,
  145.               23.0,
  146.               16.5,
  147.               12.0,
  148.               6.2,
  149.             ],
  150.           },
  151.         ],
  152.       }

去除饼图标注省略号配置

  1. option = {
  2.     title: {
  3.       text: '2323',
  4.       textStyle: { fontSize: 26 },
  5.       left: 'center',
  6.       top: 'center',
  7.     },
  9.     tooltip: {
  10.       trigger: 'item',
  11.       formatter: '{b} : {c} {d}%',
  12.     },
  13.     series: [
  14.       {
  15.         type: 'pie',
  16.         radius: ['28%', '50%'],
  17.         label: {
  18.               alignTo: 'edge', // 去除标注省略号配置
  19.                 edgeDistance: 5, // 去除标注省略号配置
  20.                 lineHeight:20, // 去除标注省略号配置
  21.           formatter: '{b} :\n {c} {d}%', // 去除标注省略号配置
  22.       },
  23.         data: [
  24.           { value: 100, name: '中' },
  25.           { value: 200, name: '高' },
  26.           { value: 50, name: '低' },
  27.         ],
  28.         emphasis: {
  29.           // 这个是鼠标放上去时候的阴影
  30.           itemStyle: {
  31.             shadowBlur: 10,
  32.             shadowOffsetX: 5,
  33.             shadowColor: 'rgba(0, 0, 0, 0.5)',
  34.           },
  35.         },
  36.       },
  37.     ],
  38.   };

修改饼图颜色

  1. option = {
  2.     title: {
  3.       text: '2323',
  4.       textStyle: { fontSize: 26 },
  5.       left: 'center',
  6.       top: 'center',
  7.     },
  8.     toolbox: {
  9.         feature: {
  10.             saveAsImage: {}
  11.         }
  12.     },
  13.     tooltip: {
  14.       trigger: 'item',
  15.       formatter: '{b} : {c} {d}%',
  16.     },
  17.     series: [
  18.       {
  19.         type: 'pie',
  20.         radius: ['28%', '50%'],
  21.         label: {
  22.               alignTo: 'edge', // 去除标注省略号配置
  23.                 edgeDistance: 5, // 去除标注省略号配置
  24.                 lineHeight:20, // 去除标注省略号配置
  25.           formatter: '{b} :\n {c} {d}%', // 去除标注省略号配置
  26.       },
  27.         data: [
  28.           { value: 100, name: '中',itemStyle: {color:"orange"} },
  29.           { value: 200, name: '高' ,itemStyle: {color:"red"}},
  30.           { value: 50, name: '低' ,itemStyle: {color:"blue"}},
  31.         ],
  32.         emphasis: {
  33.           // 这个是鼠标放上去时候的阴影
  34.           itemStyle: {
  35.             shadowBlur: 10,
  36.             shadowOffsetX: 5,
  37.             shadowColor: 'rgba(0, 0, 0, 0.5)',
  38.           },
  39.         },
  40.       },
  41.     ],
  42.   };

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

  1. 深入浅出ECharts系列 （二） 折线图

    深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载 ...

  2. 一起来玩echarts系列（一）------箱线图的分析与绘制

    一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...

  3. echarts 折柱混合图 （绑数据后）

    html: <div class="flot-chart-content" id="flot-dashboard-chart"></div&g ...

  4. echarts系列之动态修改柱状图颜色

    echarts根据某一变量动态修改柱状图颜色 1.option中参数配置项series { "name":"Android", "type" ...

  5. echarts 中 柱图 、折线图、柱图层叠

    app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...

  6. echarts展示箱型图&正态分布曲线

    效果图: 直接上代码吧: <!DOCTYPE HTML> <html> <head> <style type="text/css"> ...

  7. echarts之折线图配置（附带图例很多做成分页效果）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 百度 echarts K线图使用

    看个效果图先 首先在需要插入图例的HTML中嵌入 <div id="main" style="height:400px"></div> ...

  9. WPF仿百度Echarts人口迁移图

    GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...

  10. [UML]UML系列——类图class的关联关系（聚合、组合）

    关联的概念 关联用来表示两个或多个类的对象之间的结构关系,它在代码中表现为一个类以属性的形式包含对另一个类的一个或多个对象的应用. 程序演示:关联关系(code/assocation) 假设:一个公司 ...

随机推荐

  1. Trino Worker 规避 OOM 思路

    背景 Trino 集群如果不做任何配置优化,按照默认配置上线,Master 和 Worker 节点都很容易发生 OOM.本文从 Trino 内存设计出发, 分析 Trino 内存管理机制,到限制与优化 ...

  2. Mockito使用方法（Kotlin）

    一.为什么要使用Mockito 1.实际案例 1.1 遇到的问题 对于经常维护的项目,经常遇到一个实际问题:需求不停改变,导致架构经常需要修改某些概念的定义. 对于某些十分基础又十分常用的概念,常常牵 ...

  3. ubuntu基本

    ubuntu使用过程中遇到的指令 apt-get更新 当现出net-tools没有可安装候选 的提示时,可能是apt-get需要更新了.通过指令sudo apt install net-tools p ...

  4. Linux---ls cd

    ls 命令 ls命令是linux下最常用的命令,是 list 的缩写,可以用各种方式查看目录中的内容. 格式: ls [选项] [目录名] 常用参数 short long function -a -- ...

  5. 解决头部使用 position:fixed； 固定定位后遮住下方内容的问题

    1.在头部下面给一个空的 div 给这个div设置高度,把页面撑开,这种方法是让头部刚好遮住的是这个空div,把内容放出来. 但是这种方法需要一点点调试高度,所以不推荐. 2.把整个要使用 posit ...

  6. EasyExcel对大数据量表格操作导入导出

    前言 最近有个项目里面中有大量的Excel文档导入导出需求,数据量最多的文档有上百万条数据,之前的导入导出都是用apache的POI,于是这次也决定使用POI,结果导入一个四十多万的文档就GG了,内存 ...

  7. UWSGI 安装出现 ModuleNotFoundError: No module named '_ctypes'

    原因:Python3中有个内置模块叫ctypes,它是Python3的外部函数库模块,它提供兼容C语言的数据类型,并通过它调用Linux系统下的共享库(Shared library),此模块需要使用C ...

  8. vcenter密码设置永不过期

    由于机房断电,原本的vcenter重启后web页面出现报错,为尽快恢复vcenter管理机,直接停用了旧的vcenter虚机,重新安装了一台vcenter,两个月后,页面开始报警密码即将到期: 经查阅 ...

  9. Kubernetes_从零开始搭建k8s集群（亲测可用）

    一.前言 本文讲述从零开始搭建k8s集群,均使用国内镜像,版本均统一,使用两个虚拟机,一个主节点,一个从节点,保证k8s一次搭建成功. 注意:Kubernetes,简称K8s,是用8代替名字中间的8个 ...

  10. dafny : 微软推出的形式化验证语言

    dafny是一种可验证的编程语言,由微软推出,现已经开源. dafny能够自我验证,可以在VS Code中进行开发,在编辑算法时,写好前置条件和后置条件,dafny验证器就能实时验证算法是否正确. 在 ...