工作中写过的echarts，做个记录

1.折线图，折线点设置边框，加上y轴边框，更改网格颜色

代码如下

option = {
  tooltip: {},
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2018', '2019', '2020', '2021', '2022'],
    axisLabel: {
      interval: 0, // x轴内容过多会隐藏部分内容，这样可以显示隐藏掉的内容
      inside: false,
      textStyle: {
        color: '#fff', // 字体颜色
        fontSize: '12' // 字体大小
      }
    },
    axisLine: {
      show: true, //是否显示轴线
      lineStyle: {
        color: '#234F88' //刻度线的颜色
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    name: '人数', // 这个设置只在末尾添加单位
    nameTextStyle: {
      //y轴上方单位的颜色
      color: '#4160AE'
    },
    axisLabel: {
      interval: 0, // x轴内容过多会隐藏部分内容，这样可以显示隐藏掉的内容
      inside: false,
      textStyle: {
        color: '#fff', // 字体颜色
        fontSize: '12' // 字体大小
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#184070'], // 这里设置网格颜色
        width: 1,
        type: 'solid'
      }
    },
    axisLine: {
      show: true, //是否显示轴线
      lineStyle: {
        color: '#234F88' //刻度线的颜色
      }
    }
  },
  series: [
    {
      data: [820, 200, 934, 1290, 1330],
      type: 'line',
      areaStyle: {},
      symbol: 'circle',
      symbolSize: 7, //设定实心点的大小
      itemStyle: {
        normal: {
          color: 'ffffff', //改变折线点的颜色.
          borderColor: '#ffffff49',
          borderWidth: 8,
          lineStyle: {
            color: '#12C8EF' //改变折线颜色
          }
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(19,201,238,0.8)'
          },
          {
            offset: 1,
            color: 'rgba(19,201,238,0.3)'
          }
        ])
      }
    }
  ],
  // 调整grid属性
  grid: {
    top: '15%',
    left: '10%',
    right: '5%',
    bottom: '11%'
  }
};

2.环形饼图，每个饼图之间有间隔，可使用css引入的字体，自定义颜色

代码如下

  let data = [
        { value: 10, name: '拔丝地瓜' },
        { value: 10, name: '荔枝肉' },
        { value: 10, name: '慕斯蛋糕' },
        { value: 10, name: '菠萝咕噜肉' },
        { value: 10, name: '苦瓜炒蛋' }

      ]
     let colorList = ['#3B6BD9', '#D9AF85', '#1B8AD1', '#FF4E4E', '#6248B3', '#36CFDF', '#FD4D8E', '#49A4D0', '#31F5B5']
  option = {

        tooltip: {
          trigger: 'item'
        },

        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                borderColor: '#00224B',
                borderWidth: 3,
                color: function (colors) {
                  return colorList[colors.dataIndex]
                },
              },
            },
            data: data.map((item, i) => {
              item.label = {
                color: colorList[i],
                formatter: "{b} \n{d} % ",
                fontSize: 14,
                fontFamily: 'youyuan', // css中引入的字体
              }
              return item
            }),

          }
        ],

      };

3. 南丁格尔玫瑰图，两个图形进行叠加，比较特别的饼图，形状有点像西瓜。

代码如下：

let BookColorList = ['#09B3E7', '#47AAA1', '#FAC2F8', '#C9A353',]
let bookData = [
  { value: 40, name: '华硕' },
  { value: 23, name: '联想' },
  { value: 58, name: '小米' },
  { value: 62, name: '华为' },

]
option = {
  tooltip: {
    trigger: 'item',
    formatter: '{b} : {c} ({d}%)'
  },
  legend: {
    data: [
      '华硕',
      '联想',
      '小米',
      '华为',
    ],
    textStyle: { //图例文字的样式
      color: function (colors) {
        return BookColorList[colors.dataIndex]
      },
      fontSize: 13,
    },
    itemWidth: 6, //图例颜色块的宽度和高度
    itemHeight: 6,
    icon: "circle", // 图例前的图标为圆点
    top: 0,
    itemGap: 20
  },

  series: [
    {
      type: 'pie',
      silent: true, // 鼠标无操作
      radius: ['0', '70%'],
      center: ['50%', '58%'],
      roseType: 'radius',
      itemStyle: {
        normal: {
          color: function (colors) {
            return BookColorList[colors.dataIndex];
          }
        }
      },
      label: {
        show: true
      },

      data: bookData.map((item, i) => {
        item.label = {
          color: BookColorList[i],
          formatter: "{d} % ",
          fontSize: 15
        }
        return item
      }),
      labelLine: {
        normal: {
          length: 0,
          length2: 0,
          show: false    // 隐藏所有指示线
        }
      },
    },
    {

      type: 'pie',
      radius: ['0%', '63%'],
      center: ['50%', '58%'],
      roseType: 'radius',
      itemStyle: {
        normal: {
          color: '#1C3949',
          borderWidth: 2,
          borderColor: '#00224B',
        }
      },
      data: bookData,
      label: {
        show: false
      },

    },
  ],

};
option && myChart.setOption(option);

4.串行柱形图

代码如下：

let data = {
  联想: 120,
  红米: 222,
  小米: 150,
  华硕: 111,
  宏碁: 141
};

let bardata = [];
let title = [];
for (let i in data) {
  bardata.push(data[i]);
  title.push(i);
}

let maxBarList = [];
let maxBar = Math.max(...bardata); // 数组最大值
if (maxBar % 50 == 0) {
  maxBarList = new Array(bardata.length).fill(maxBar);
} else {
  let r = maxBar + 50 - (maxBar % 50); // 白线补充
  maxBarList = new Array(bardata.length).fill(r);
}

option = {
  backgroundColor: '#081034',
  xAxis: {
    type: 'category',
    data: title,
    axisLine: {
      lineStyle: {
        color: '#fff' //更改坐标轴颜色
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#0B2C57'], // 这里设置网格颜色
        width: 0,
        type: 'solid'
      }
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff' //更改坐标轴文字颜色
      }
    }
  },
  series: [
  

    {
      type: 'pictorialBar',
      symbol: 'rect',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#24DDFF' },
            { offset: 1, color: '#0A6AB7' }
          ])
        }
      },

      symbolRepeat: true,
      symbolSize: [12, 6],
      symbolMargin: 2,
      z: 15,
      data: bardata
    },

    {
      type: 'bar',
      barWidth: 1,
      itemStyle: {
        color: '#fff'
      },
      data: maxBarList,
      z: 14
    }
  ],

  grid: {
    top: '5%',
    left: '10%',
    right: '5%',
    bottom: '8%'
  }
};

5.环形柱形图

代码:

let seriesDatum = [59, 24, 30, 60, 72]
let symbolArray = ['苹果', '菠萝', '橙子', '凤梨', '桃子']
let markPointDatum = []

var xFontcolor = ['#BD2020', '#E57D37', '#EBBE35', '#12ADBD', '#8274D0']


option = {
  title: [
    {
      text: ''
    }
  ],
  polar: {
    radius: [10, '90%']
  },
  angleAxis: {
    show: false, // 角度x轴刻度线
    max: 100, // 圆环最大值
    startAngle: 90, // 圆环开始绘制的位置，90度为12点的位置

  },
  radiusAxis: {
    type: 'category',
    data: symbolArray,
    show: true,
    axisLabel: {
      show: true, // x轴刻度文本
      interval: 0, // x轴内容过多会隐藏部分内容，这样可以显示隐藏掉的内容,
      textStyle: {
        color: function (value, index) { // 设置多种颜色
          return xFontcolor[index]
        },
        fontSize: 10
      },
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false // x轴刻度分割线
    },
    z: 25,
  },
  tooltip: {},
  series: [
    {
      type: 'bar',
      data: seriesDatum,
      coordinateSystem: 'polar',
      roundCap: true,
      barWidth: 5,
      label: {
        show: true,
        position: 'middle', // 柱体文字对齐方式
        // offset: [3, -6], // 文字偏移量
        align: 'top',
        formatter: '{c}%',
        textStyle: {
          color: '#fff', // 字体颜色
          fontSize: '10', // 字体大小
        }
      },
      itemStyle: {
        normal: {
          color: {
            type: 'linear',
            colorStops: [
              {
                offset: 0, color: '#2397F6' // 0% 处的颜色
              },
              {
                offset: 1, color: '#0ECDEE' // 100% 处的颜色
              },
            ],
            global: false // 缺省为 false
          }
        }
      },
      z: 15,
    },
    {
      type: 'bar',
      barWidth: 1,
      coordinateSystem: 'polar',
      roundCap: true,
      data: [100, 100, 100, 100, 100],
      z: 14,
      barGap: '-50%'
    },
  ],


};

6.仪表盘改造成进度条

option = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      progress: {
        show: true
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}'
      },
      data: [
        {
          value: 50,
          name: ''
        }
      ],
      axisTick:{
        show:false, // 刻度是否显示
     
      },
      splitLine:{
        show:false // 分隔符是否显示
      },
      axisLabel:{
        show:false // 数字是否显示
      },
      pointer:{
        show:false
      },
      detail:{
        show:false // 数据是否显示
      }
    }
  ]
};