echart图表简单使用1

创建组件BareChart、LineChart、PieChart

使用npm install echarts --save安装依赖

柱状图

<template>
  <div class="bar-chart">
    <div id="main" ref="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "BarChart",
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    /* this.$refs.main; */
     var myChart = echarts.init(this.$refs.main)
    myChart.setOption({
      title: {
        text: "柱状图",
      },
      tooltip: {},
      xAxis: {
        axisLabel:{
          interval:0,
          rotate:20,
          margin:15,
        },
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
            data:[{
            value:"5",
            name:"衬衫",
           
        },{
            value:"20",
            name:"羊毛衫"
        },{
            value:"36",
            name:"雪纺衫",
             itemStyle:{
              color:{
                type:"linear",
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops:[{
                  offset:0,
                  color:'red'
                },{
                  offset:1,
                  color:'blue'
                },
                ],
                global:false,
              }
            }
        },{
            value:"10",
            name:"裤子"
        },{
            value:"10",
            name:"高跟鞋"
        },{
            value:"20",
            name:"袜子"
        },]
        },
      ],
    });
  window.BarChart = myChart
  },
};
</script>

<style scoped lang="scss">
#main {
  height: 300px;
}
</style>

折线图

<template>
  <div class="bar-chart">
    <div id="main" ref="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "LineChart",
  mounted() {
    //  var myChart = echarts.init(document.getElementById('main'));
     var myChart = echarts.init(this.$refs.main)
    myChart.setOption({
      title: {
        text: "折线图",
      },
      tooltip: {},
      xAxis: {
          axisLabel:{
          interval:0,
          rotate:20,
          margin:15,
        },
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {
      },
      series: [
        {
          name: "销量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
    window.LineChart = myChart
  },
};
</script>

<style scoped lang="scss">
#main{
    height: 300px;
}
</style>

饼图

<template>
  <div class="bar-chart">
    <div id="main" ref="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "PieChart",
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    /* this.$refs.main; */
    var myChart = echarts.init(this.$refs.main);
    myChart.setOption({
      title: {
        text: "饼图",
      },
      tooltip: {},
      xAxis: {
        show: false,
        /*  data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], */
      },
      yAxis: { show: false },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
        },
      ],
    });
    window.PieChart = myChart
  },
};
</script>

<style scoped lang="scss">
#main {
  height: 300px;
}
</style>

引用组件并调用

<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="8">
        <el-card shadow="always"> <bar-chart /> </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always"> <line-chart /></el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always"> <pie-chart /> </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top:15px">
      <el-col :span="24">
        <el-card shadow="always"> 中国地图 </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BarChart from "@/components/BarChart.vue"
import LineChart from "@/components/LineChart.vue"
import PieChart from "@/components/PieChart.vue"
export default {
  components:{
    BarChart,
    PieChart,
    LineChart
  },
   mounted(){
     window.onresize = function(){
       window.BarChart.resize(),
       window.LineChart.resize(),
       window.PieChart.resize()
     }
   }
};
</script>

<style>
</style>

视图可视化

 mounted(){
     window.onresize = function(){
       window.BarChart.resize(),
       window.LineChart.resize(),
       window.PieChart.resize()
     }
   }