Vue中使用echarts图表

水深无声 2022-05-19 04:08 413阅读 0赞

### 一、安装引入echarts插件 ###

安装

npm install echarts -S

在main.js中配置引入

// 引入echarts
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts
    Vue.use(echarts)

## 二、使用 ##

<template>
      
      <div id="main" style="width: 800px;height:600px;font-size: 20px;margin-left: 50px;padding: 10px"></div>
    </template>
    
    <script>
      export default {
        name: "echart-sales",
        data() {
          return {
            getSalesUrl: '/manage/category/getSales',
            data1: [],
            dataName: []
          }
        },
        methods: {
          getEchars() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('main'));
            console.log("获取echarts表");
    
            // 指定图表的配置项和数据
            var option = {
              title: {
                text: '图书销量图例',
                subtext: '按类别进行统计',
                x: 'center',
                textStyle: {
                  fontSize: 30
                }
              },
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: this.dataName,
                textStyle: {
                  fontSize: 20 // 用 legend.textStyle.fontSize 更改示例大小
                }
              },
              series: [
                {
                  name: '访问来源',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '60%'],
                  data: this.data1,
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal: {
                      label: {
                        textStyle: {
                          // 用 itemStyle.normal.label.textStyle.fontSize 來更改餅圖上項目字體大小
                          fontSize: 20
                        }
                      }
                    }
                  }
                }
              ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
          }
        },
        mounted:function() {
    //挂载前请求数据
          this.$http.get(this.getSalesUrl)
            .then((res) => {
              console.log(res);
              this.data1 = res.data.data;
              console.log(this.data1);
              for (var i = 0; i < this.data1.length; i++) {
                this.dataName[i] = this.data1[i].name;
              }
    //渲染数据
              this.getEchars();
    
            })
    
        }
      }
    </script>
    
    <style scoped>
    
    </style>

### 三、运行 ###

![70][]

[70]: /images/20220519/2c0879e597a04a9ca955016259fb788f.png