echart-pie

官网

npm install echarts --save

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

option && myChart.setOption(option);

之前项目代码

<template>
    <!-- 历年销售对比 -->
    <div class="wrap-div" ref="wrapHeight">
    <div ref="bar_chart" class="bar-chart" :style = "{width:wrapWidth+'px',height:wrapHeight+'px'}"></div>
    </div>
</template>
<script>
    const echarts = require('echarts/lib/echarts');
    require('echarts/lib/chart/bar');
    require('echarts/lib/chart/line');
    require('echarts/lib/chart/gauge');
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/legend');
    export default {
        data(){
            return{
                yearData:[],
                qtyData:[],
                wrapHeight: 210,
                wrapWidth: 342,
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.getlist();
                this.getDivHeight();
            },
            getDivHeight(){
                this.wrapHeight = this.$refs.wrapHeight.offsetHeight;
                this.wrapWidth = this.$refs.wrapHeight.offsetWidth;
            },

            //获取数据
            getlist(){
                let tempData = [];
                this.yearData = [];
                this.qtyData = [];
                this.getAjax('/mktmfc/forms/getsalescompare')
                .then((result)=>{
                    if(result.status === 200){
                        tempData = result.data.salesCompare
                        if(tempData.length === 0){
                            this.yearData = ['2017','2018'];
                            this.qtyData = [0,0];
                        }else {
                            for(let i=0; i<tempData.length; i++){
                                this.yearData.push(tempData[i].YEAR);
                                this.qtyData.push(tempData[i].qty);
                            }
                        }
                    }else {
                        this.$message({
                            message:this.returnIntercept(result),
                            type: 'error'
                        });
                    }
                })
                .then(()=>{
                    this.initEchart();
                    this.setEchart(this.yearData,this.qtyData);
                })
            },

            initEchart(){
                this.bar_chart = echarts.init(this.$refs.bar_chart);
            },

            //传参
            setEchart(yearData,qtyData) {
                //bar
                this.bar_chart.setOption({
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    // legend: {
                    //     data:['应收','实收'],
                    //     right: '7%',
                    // },
                    grid: {
                        left: '16%',
                        width:'75%',
                        height:'70%',
                        bottom: '17%'
                    },
                    xAxis : [
                        {
                            type: 'category',
                            name:'',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data:yearData
                        }
                    ],
                    yAxis : [
                        {
                            type: 'value',
                        },
                    ],
                    series : [
                        {
                            name:'方量',
                            type:'bar',
                            barWidth: '10%',
                            itemStyle: {
                                normal: {
                                    color: '#008ae0'
                                }
                            },
                            data:qtyData,

                        }
                    ]
                });
            }
        }
        
    }
</script>
<style lang="less" scoped type="text/less">
    .wrap-div {
        height: 100%;
    }
    .self-table {
        th,td {
            font-weight: normal;
            border: 0px solid #fff;
        }
    }
    .el-table th{
        background-color: #fff;
    }
    .bar-chart {
        /*width: 470px;*/
        /*height: 250px;*/
    }
</style>

<template>
  <div>
    <div class="pie">
        <div id="pie1">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main1" style="float:left;width:100%;height: 300px"></div>
        </div>
        <div id="pie2">
            <div id="main2" style="float:left;width:100%;height: 300px"></div>
        </div>
    </div>
  </div>
</template>

<script>// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')


export default {
  created(){
  },
  mounted(){
    this.initData();
  },
  methods:{
    //初始化数据
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'));
      // 绘制图表
      myChart.setOption({
          title : {
              text: '某站点用户访问来源',//主标题
              subtext: '纯属虚构',//副标题
              x:'center',//x轴方向对齐方式
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              bottom: 'bottom',
              data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:[
                      {value:335, name:'直接访问'},
                      {value:310, name:'邮件营销'},
                      {value:234, name:'联盟广告'},
                      {value:135, name:'视频广告'},
                      {value:1548, name:'搜索引擎'}
                  ],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      });
    },
  }
}
</script>