1.样式展示

不知道有没有人在别人的网站看到过这种样式的图表。

我感觉还挺好看的。所以去网上看了一下，学习了一下。现在分享给大家。大家也可以运用到自己的博客网站里。做数据统计蛮好看的。

2.引入Echart

其实这也是一个类似于elementUI的东西，我们首先引入他。

npm install echarts --save

2.1 饼状图

首先我们来创建饼状图。

<template>
    <div class="pie-chart" id="pie-chart"></div>
</template>


<script>
import echarts from 'echarts'

export default {
  mounted() {
    this.initPieData();
  },
    data() {
    return {
      category: {
        android: 10,
        python: 20,
        java: 15,
        mysql: 8,
        nginx: 12,
      }
    }
  },
     methods: {
             initPieData() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('pie-chart'));
      // 绘制图表
      myChart.setOption({
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        title: {
          text: '网站文章分类饼状图',//主标题
          subtext: '测试用一下',//副标题
          x: 'center',//x轴方向对齐方式
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '40%',
            //第一个控制左右距离，第二个控制标题与图形距离
            center: ['50%', '50%'],
            data: [
              {value: this.category.android, name: '安卓'},
              {value: this.category.python, name: 'python'},
              {value: this.category.mysql, name: '数据库'},
              {value: this.category.nginx, name: 'nginx'},
              {value: this.category.java, name: 'java'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },

            }
          }
        ]
      });
    },
     }
    
</script>


<style>
.pie-chart {
  margin-top: 20px;
  width: 319px;
  height: 240px;
}
</style>

结果展示：

2.2雷达图

<template>
<div class="radar-chart" id="radar-chart"></div>
</template>

<script>
    export default{
      mounted() {
    this.initRadarData();
  },
     initRadarData() {
      const myChart = echarts.init(document.getElementById('radar-chart'));
      myChart.setOption({
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {},
        radar: {
          name: {
            textStyle: {
              color: '#000',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(131,141,158,.1)',
            },
          },
          indicator: [{
            name: 'java',
            max: 30,
          },
            {
              name: 'nginx',
              max: 30
            },
            {
              name: '数据库',
              max: 30
            },
            {
              name: 'python',
              max: 30
            },
            {
              name: '安卓',
              max: 30
            },
            {
              name: 'python',
              max: 30
            },

          ],
          splitArea: {
            show: false,
            areaStyle: {
              color: 'rgba(255,0,0,0)', // 图表背景的颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: 'rgba(131,141,158,.1)', // 设置网格的颜色
            },
          },
        },
        series: [{
          center: ['50%', '60%'],
          type: 'radar',
          data: [{
            value: [15, 12, 8, 20, 10, 15],
            itemStyle: {
              normal: {
                color: '#5B8FF9',
                lineStyle: {
                  color: '#5AD8A6',
                },
              },
            },
          }
          ]
        }]
      })
    },}
</script>

<style>
    .radar-chart {
  margin-top: 20px;
  width: 319px;
  height: 240px;
}
</style>

结果展示：

3.总结：

其实从上面两个列子，就可以看出来。这个东西挺简单的。

1. 引入
2. 初始化一下
3. 定义一下数据
4. 绘制
5. 在mounted时调用一下绘制方法就完事了。

这个echart感觉还挺厉害的，它的教程网址。