Echarts在线免费图表

 
            
const levelOData = [
  {
    name: '流量传感器',
    value: 15,
    itemStyle: {
      color: 'rgb(69,200,254)',
    },
  },
  {
    name: '分析平台',
    value: 9,
    itemStyle: {
      color: 'rgb(92,137,255)',
    },
  },
  {
    name: '沙箱',
    value: 72,
    itemStyle: {
      color: 'rgb(254,203,72)',
    },
  },
];

const level1Data = [
  {
    name: '流量传感器',
    value: 10,
    itemStyle: {
      color: 'rgba(69,200,254,0.3)',
      borderWidth: 1,
      borderColor: 'rgb(69,200,254)',
    },
  },
  {
    name: '流量传感器',
    value: 5,
    itemStyle: {
      color: 'rgba(69,200,254,0.3)',
      borderWidth: 1,
      borderColor: 'rgb(69,200,254)',
    },
  },
  {
    name: '分析平台',
    value: 9,
    itemStyle: {
      color: 'rgba(92,137,255,0.3)',
      borderWidth: 1,
      borderColor: 'rgb(92,137,255)',
    },
  },
  {
    name: '沙箱',
    value: 72,
    itemStyle: {
      color: 'rgba(254,203,72,0.3)',
      borderWidth: 1,
      borderColor: 'rgb(254,203,72)',
    },
  },
];

option = {
   backgroundColor: "#fff",
  tooltip: {
    trigger: 'item',
  },
  legend: {
    show: true,
    fontFamily: 'VUI-LCD',
    fontSize: 18,
    icon: 'rect',
    itemHeight: 10,
    itemWidth: 10,
    lineFeed: false,
    right: 150,
    top: 'middle',
    orient: 'vertical',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '55%'],
      center: ['40%', '50%'],
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        focus: 'self',
        blurScope: 'global',
        scale: false,
      },
      labelLine: {
        show: false,
      },
      data: levelOData,
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['60%', '75%'],
      center: ['40%', '50%'],
      label: {
        show: false,
        position: 'center',
      },
      labelLine: {
        show: false,
      },
      emphasis: {
        focus: 'self',
        blurScope: 'global',
        scale: false,
      },
      data: level1Data,
    },
  ],
};
const hightLight = (e) => {
  const name = e.name;
  if (e.isFired) return;
  const series0DataIndex = [];
  const series1DataIndex = [];
  for (let i = 0; i < levelOData.length; i++) {
    if (levelOData[i].name === name) {
      series0DataIndex.push(i);
    }
  }
  for (let i = 0; i < level1Data.length; i++) {
    if (level1Data[i].name === name) {
      series1DataIndex.push(i);
    }
  }
  console.log(series1DataIndex);
  console.log(series0DataIndex);
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: [0, 1],
    isFired: true,
    dataIndex: [series1DataIndex, series0DataIndex],
  });
};
myChart.on('highlight', hightLight);
myChart.on('mouseover', hightLight);