静态

<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;}
}