Echarts在线免费图表

 
            option = {
    tooltip: { // 提示框组件
      show: false,
    },
    graphic: {
      type: 'text',
      left: 'center',
      top: 'center',
      z: 2,
      zlevel: 100,
      style: {
        text: '全年目标2000万',
        x: 100,
        y: 100,
        textAlign: 'center',
        fill: '#000',
        font: `36px "微软雅黑", sans-serif`,
      },
    },
    color: ['#00bab4', '#ff8928'], // 手动设置每个图例的颜色
    legend: { // 图例组件
      show: false,
    },
    series: [ // 系列列表
      {
        name: '', // 系列名称
        type: 'pie', // 类型 pie表示饼图
        // center:['30%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
        radius: ['65%', '75%'], // 饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
        itemStyle: { // 图形样式
          normal: { // normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
            label: { // 饼图图形上的文本标签
              show: true, // 平常不显示
              formatter: (params) => {
                if (params.name >= 0) {
                  return `完成￥100万\n100%`
                }

                return `差额￥100万\n100%`
              },
              textStyle: {
                fontSize: 36,
                color: '#000',
              },
            },
            labelLine: { // 标签的视觉引导线样式
              show: true,
              length: parseInt(30),
              length2: parseInt(30),
              textStyle: {
                fontSize: 36,
                fontWeight: 'bold',
              },
            },
          },
          emphasis: { // normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
            label: { // 饼图图形上的文本标签
              show: true,
              position: 'center',
              textStyle: {
                fontSize: 36,
                fontWeight: 'bold',
              },
            },
          },
        },
        data: [{name: 100, value: 100},{name: -100, value: 100}],
      },
    ],
  }