标签：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
来源： https://www.cnblogs.com/ljq20204136/p/16600007.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。