学习总结3.7

 

柱状图

<template>
    <div ref="myChart" id="myChart">  
    </div>
</template>
<script>
import * as echarts from "echarts"
export default{
    mounted(){
        let myChart=echarts.init(this.$refs.myChart)
        let xData=["语文","数学","化学","物理"];
        let yData=[73,39,93.88];
        let option={
            title:{
                text:"学科"
            },
            xAxis:{
                data:xData,
                type:"category"
            },
            yAxis:{
                
            },
            series:[
                {
                  name:"销量",
                  type:"bar",
                  data:yData
                }
            ]
        }
        myChart.setOption(option)
    }
}
</script>
<style>
#myChart{
    width:500px;
    height:500px;
    border: 1px,solid red;
}
</style>

饼状图

<template>
    <div ref="myChart" id="myChart">  
    </div>
</template>
<script>
import * as echarts from "echarts"
export default{
    mounted(){
        let myChart=echarts.init(this.$refs.myChart)
        let xData=["语文","数学","化学","物理"];
        let yData=[73,39,93.88];
        let option={
            title:{
                text:"学科"
            },
            xAxis:{
                data:xData,
                type:"category"
            },
            yAxis:{
                
            },
            series:[
                {
                  name:"销量",
                  type:"bar",
                  data:yData
                }
            ]
        }
        myChart.setOption(option)
    }
}
</script>
<style>
#myChart{
    width:500px;
    height:500px;
    border: 1px,solid red;
}
</style>