echarts

安装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);
}