Echarts部分图表的使用

 

 源码如下所示：

<template>
  <div class="reports">
      <!-- A面包屑导航区域 -->
			<el-breadcrumb style="margin-bottom:10px" separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>数据报表</el-breadcrumb-item>
                <el-button type="warning" @click="$router.push('/test1')">点我去Test1Echarts</el-button>
			</el-breadcrumb>
            <el-card>
                <el-row>
                    <el-col :span="8">
                        <el-table :data="tableData" style="width:350px">
                            <el-table-column prop="name" label="课程" width="70"></el-table-column>
                            <el-table-column prop="todayBuy" label="今日购买" width="80"></el-table-column>
                            <el-table-column prop="monthBuy" label="本月购买" width="80"></el-table-column>
                            <el-table-column prop="totalBuy" label="总购买" width="80"></el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="16">
                            <!-- 折线图 -->
                        <el-card class="linepic" style="height:280px,width:300px">
                            <div ref="echarts1" style="height:280px" class="echarts1"> </div>
                        </el-card>
                        <div class="graph">
                                <!-- 柱状图 -->
                            <el-card class="graphl" style="height:260px">
                                <div id="echarts2" ref="echarts2" style="height:260px"></div>
                            </el-card>
                                <!-- 饼图 -->
                            <el-card  class="graphr" style="height:260px">
                                <div id="echarts3" ref="echarts3" style="height:260px"></div>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
      
            </el-card>
  </div>
</template>


<script>
const echarts = require('echarts')
export default {
  name:"Welcome",
  data() {
      return {
          tableData:[]
      }
  },
  methods: {
     getData(){
          this.$http.get("http://localhost:8080/api/welcome/getData").then((res)=>{
            console.log("welcome=res",res)
            const {tableData,orderData,userData,videoData}=res.data.data
            // 表格数据
            this.tableData=tableData
            console.log("@orderData",orderData);
            console.log("@uesrData",userData);
            console.log("@videoData",videoData);
// ============================================================
//    1.折线图
            // 基于准备好的dom,初始化echarts实例
            const echarts1=echarts.init(this.$refs.echarts1)
            // 指定图表的配置项和数据
            var echarts1Option={}
            // 处理数据
            const xAxis=Object.keys(orderData.data[0])
            // console.log("@xAxis",xAxis);//['苹果', 'vivo', 'oppo', '小米', '三星', '华为']
            const xAxisData={
              data:xAxis
            }
            echarts1Option.xAxis=xAxisData
            echarts1Option.yAxis={}
            echarts1Option.legend=xAxisData
            echarts1Option.series=[]
            xAxis.forEach(key=>{
                echarts1Option.series.push({
                  name:key,
                  data:orderData.data.map(item=>item[key]),
                  type:"line"
                })
            })
            console.log("echarts1Option",echarts1Option);
             //  使用指定的配置项和数据显示图表
            echarts1.setOption(echarts1Option)

// ============================================================
// 2.柱状图
            const echarts2 = echarts.init(this.$refs.echarts2)
            const eachrts2Option = {
                legend: {
                    // 图例文字颜色
                    textStyle: {color: "blue"},
                },
                grid: {
                    left: "20%",
                },
                // 提示框
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category", // 类目轴
                    data: userData.map(item => item.date),
                    axisLine: {lineStyle: {color: "#17b3a3"}},
                    axisLabel: {interval: 0,color: "#333"},
                },
                yAxis: [
                    {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                        color: "#17b3a3",
                        },
                    },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de"],
                series: [
                    {
                        name: '新增用户',
                        data: userData.map(item => item.new),
                        type: 'bar'
                    },
                    {
                        name: '活跃用户',
                        data: userData.map(item => item.active),
                        type: 'bar'
                    }
                ],
            }
            echarts2.setOption(eachrts2Option)

// ============================================================
 // 3.饼状图
            const echarts3 = echarts.init(this.$refs.echarts3)
            const eachrts3Option = {
                tooltip: {
                    trigger: "item",
                },
                color: [
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series: [
                    {
                        data: videoData,
                        type: 'pie'
                    }
                ],
            }
            echarts3.setOption(eachrts3Option)
          })
     }
  },
  mounted() {
    this.getData()
  },
}
</script>

<style>
.graph{
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}
.graphl{
    width: 1000px;
}
.graphr{
    width: 1000px;
    margin-left: 5px;
}
.linepic{
    margin: 8px;
}
</style>