echarts

作者: wqjcarnation | 来源:发表于2020-03-27 17:24 被阅读0次

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

    相关文章

      网友评论

          本文标题:echarts

          本文链接:https://www.haomeiwen.com/subject/frfruhtx.html