安装echarts依赖
> cnpm install echarts -S
main.js中引入
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
echarts.vue
<template>
<div id="myChart" :style="{width: '600px', height: '300px'}"></div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App',
data:[]
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
this.$axios.post('http://localhost:8082/vue-servlet/echartsServlet')
.then(res=>{
//const data = res.data;
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: res.data
}]
});
})
}
}
}
</script>
后台servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ObjectMapper om=new ObjectMapper();
int[] array={5, 20, 36, 10, 10, 20};
String json="";
try {
json=om.writeValueAsString(array);
System.out.println(json);
} catch (JsonProcessingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
response.getWriter().write(json);
}
网友评论