在vue中使用echarts

标签：vue name show item 使用 true echarts option

1.引入echarts

先通过npm安装echarts

npm run echarts--save

2.在main.js中

import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts 3.在.vue文件中（包括后端接口）

<template>
    <div id="main"></div>
</template>
<script>
  export default {
    name: "EchartPractice",
    data(){

    },
    methods:{
      drawChart() {
        var myEchart = this.$echarts.init(document.getElementById("main"));
        var option = {
          title: {
          text: 'Re基础南丁格尔玫瑰图',
          subtext: 'Fake Data',
          left: 'center'
         },
          tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom'
                },
        toolbox: {
        show: true,
        feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
        series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
        borderRadius: 8
        },
        data: [
         
      ]
    }
  ]
};
  this.$http.get("http://localhost:8080/echarts").then((res)=>{
          res.data.forEach(item=>{
            option.series[0].data.push({name:item.name,value:item.count})
          })
             myEchart.setOption(option);
            console.log(option)
        })
        
      }
    },
    mounted() {
     this.drawChart();
    }
  }
</script>
<style>
  #main {
    width: 600px;
    height:600px;
    margin: auto;
  }
</style>

效果图

 

 

标签：vue,name,show,item,使用,true,echarts,option
From： https://www.cnblogs.com/ljq20204136/p/16600007.html