vue 引入echarts (动静态)

静态

<template>
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

</template>

<script>

export default {
  name: 'StaAll',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.drawLine();
  },
  methods: {
    drawLine () {
      var echarts = require('echarts');
      var myChart = echarts.init(document.getElementById('myChart'));
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      });
    }
  }
}
</script>

<style scoped>
</style>

动态

<template>
    <div class="chart-container">
		<div id="chartPie" style="width:100%; height:550px;"></div>
	</div>
</template>
 
<script>
    export default {
        name: "StaRecord",
		data() {
        	return {
        		chartPie: '',
				typeName: [],//新闻类型名称
				typeNum: [] //新闻类型数量
			}
		},
		methods: {
        	drawPieChart() {
        	    // 基于准备好的dom，初始化echarts实例
				this.chartPie = this.$echarts.init(document.getElementById("chartPie"));
				this.chartPie.setOption({
					//设置标题,副标题,以及标题位置居中
				 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: [
				{ value: 40, name: 'rose 1' },
				{ value: 38, name: 'rose 2' },
				{ value: 32, name: 'rose 3' },
				{ value: 30, name: 'rose 4' },
				{ value: 28, name: 'rose 5' },
				{ value: 26, name: 'rose 6' },
				{ value: 22, name: 'rose 7' },
				{ value: 18, name: 'rose 8' }
			]
			}
		]
				});
			},
			//动态获取饼状图的数据
			async initData() {
			//url可以在action.js配置，我是学习期间习惯这样哈哈！！
				var url="test/showCricle";
			this.getRequest("test/showCricle").then(res => {
					
					console.log(res.data);
					var getData = [];
					//先进行赋值
					console.log(res.data.length)
					//for循环赋值
					for(let i=0; i<res.data.length; i++) {
						var obj = new Object();
						obj.name = res.data[i].typename;
						obj.value = res.data[i].number;
						getData[i] = obj;
					}
				
					//然后再给饼状图赋值
					this.chartPie.setOption({
						legend: {
							data: res.data.typename,
						},
						series:[{
								data: getData,
							}]
					});
				})
        		
				
			},
			drawCharts() {
				this.drawPieChart();
			},
		},
		//页面一加载就调用方法
		mounted () {
		    //先调用这个方法赋值
        	this.initData();
        	//再调用饼状图方法
			this.drawCharts();
		}
 
    }
 
</script>

后端

 @RequestMapping("/showCricle")
    public RespPageBean showCricle(){
        List <TestMap>list= new ArrayList<TestMap>();
         TestMap testMap1=new TestMap();
         testMap1.setNumber(20);
         testMap1.setTypename("%20");
         list.add(testMap1);

        TestMap testMap2=new TestMap();
        testMap2.setNumber(30);
        testMap2.setTypename("%30");
        list.add(testMap2);

        TestMap testMap3=new TestMap();
        testMap3.setNumber(25);
        testMap3.setTypename("%25");
        list.add(testMap3);

        TestMap testMap4=new TestMap();
        testMap4.setNumber(25);
        testMap4.setTypename("%25");
        list.add(testMap4);

        return  new RespPageBean(0L,list);
    }

实体类

public class RespPageBean {
    private Long total;
    private List<?> data;

    public RespPageBean() {
    }

    public Long getTotal() {
        return total;
    }

    public RespPageBean(Long total, List<?> data) {
        this.total = total;
        this.data = data;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public List<?> getData() {
        return data;
    }

    public void setData(List<?> data) {
        this.data = data;
    }
}