Echarts 饼图

基础饼图

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

环状图

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

南丁格尔玫瑰图

option = {
  title: {
    text: 'Nightingale Chart',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    left: 'center',
    top: 'bottom',
    data: [
      'rose1',
      'rose2',
      'rose3',
      'rose4',
      'rose5',
      'rose6',
      'rose7',
      'rose8'
    ]
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Radius Mode',
      type: 'pie',
      radius: [20, 140],
      center: ['25%', '50%'],
      roseType: 'radius',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 33, name: 'rose 2' },
        { value: 28, name: 'rose 3' },
        { value: 22, name: 'rose 4' },
        { value: 20, name: 'rose 5' },
        { value: 15, name: 'rose 6' },
        { value: 12, name: 'rose 7' },
        { value: 10, name: 'rose 8' }
      ]
    },
    {
      name: 'Area Mode',
      type: 'pie',
      radius: [20, 140],
      center: ['75%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      },
      data: [
        { value: 30, name: 'rose 1' },
        { value: 28, name: 'rose 2' },
        { value: 26, name: 'rose 3' },
        { value: 24, name: 'rose 4' },
        { value: 22, name: 'rose 5' },
        { value: 20, name: 'rose 6' },
        { value: 18, name: 'rose 7' },
        { value: 16, name: 'rose 8' }
      ]
    }
  ]
};

双饼图动画

<template>
  <Chart :option="option" @click.native="onClick" v-loading="isLoading" />
</template>

<script>
import Chart from './chart.vue';
const sleep = time => new Promise(r => setTimeout(r, time));

const list1 = Array.from({ length: 5 })
  .map((item, index) => {
    return {
      name: `数据${index}`,
      value: Math.random() * 1000
    };
  })
  .sort((a, b) => b.value - a.value);

const list2 = list1.map(item => {
  return {
    name: item.name,
    value: Math.random() * 1000
  };
});

const option1 = {
  animation: true,
  tooltip: {
    show: true
  },
  title: [
    {
      text: '指标1',
      left: '50%',
      top: 'middle',
      textAlign: 'center'
    }
  ],
  series: [
    {
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['40%', '60%'],
      label: {
        show: true
      },
      data: list1
    }
  ]
};

const option2 = {
  animation: true,
  tooltip: {
    show: true
  },
  title: [
    {
      text: '指标1',
      left: '25%',
      top: 'middle',
      textAlign: 'center'
    },
    {
      text: '指标2',
      left: '75%',
      top: 'middle',
      textAlign: 'center'
    }
  ],
  series: [
    {
      type: 'pie',
      center: ['25%', '50%'],
      radius: ['40%', '60%'],
      label: {
        show: true
      },
      data: list1
    },
    {
      type: 'pie',
      center: ['75%', '50%'],
      radius: ['40%', '60%'],
      label: {
        show: true
      },
      data: list2
    }
  ]
};
export default {
  components: {
    Chart
  },
  data() {
    return {
      option: option1,
      toggle: 0,
      isLoading: false
    };
  },
  methods: {
    async onClick() {
      this.toggle = [this.toggle + 1] % 2;
      this.isLoading = true;
      await sleep(600);
      this.isLoading = false;
      this.option = this.toggle === 0 ? option1 : option2;
    }
  }
};
</script>

<template>
  <div id="echarts-container"></div>
</template>

<script>
// import * as echarts from "echarts";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart, PieChart, FunnelChart, SankeyChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  LegendComponent,
  GridComponent,
  GraphicComponent
} from 'echarts/components';
// 注册必须的组件
echarts.use([CanvasRenderer]);
echarts.use([TitleComponent, TooltipComponent, ToolboxComponent, LegendComponent, GridComponent, GraphicComponent]);
echarts.use([LineChart, BarChart, PieChart, FunnelChart, SankeyChart]);

const sleep = time => new Promise(r => setTimeout(r, time));

const option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};

export default {
  props: {
    option: {
      default: () => option
    }
  },
  watch: {
    option() {
      this.render();
    }
  },
  created() {
    this.title = []
    this.echartsInstance = null;
  },
  mounted() {
    this.echartsInstance = echarts.init(document.getElementById('echarts-container'));

    window.addEventListener('resize', () => {
      this.echartsInstance.resize();
    });
    this.echartsInstance.on('finished', () => {
      this.option.title = this.title;
      this.echartsInstance.setOption(this.option, false);
    });
    this.render();
  },
  methods: {
    async render() {
      this.title = this.option.title;
      this.option.title = [];
      this.echartsInstance.setOption(this.option, true);
    }
  }
};
</script>