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>
效果图
Original: https://www.cnblogs.com/ljq20204136/p/16600007.html
Author: 山海自有归期
Title: 在vue中使用echarts
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/579140/
转载文章受原作者版权保护。转载请注明原作者出处！