vue-echarts图表使用方法及连接后端idea

• 安装依赖 : cnpm install echarts -S
  echarts连接,自己在里面找到一个喜欢的。
  https://www.echartsjs.com/index.html
• 找好之后,进入对main.js进行配置:

import ElementUI from 'element-ui';  //加入elemt-ui
import 'element-ui/lib/theme-chalk/index.css';

import Echarts from 'echarts';    //配置each,
import axios from 'axios'       //引用
    
Vue.prototype.$echarts = Echarts;
Vue.prototype.$ajax = axios;

Vue.use(ElementUI);
Vue.use(VueRouter);
//连接idea
 Vue.prototype.$http = axios.create({
   baseURL:'http://localhost:8082'   //端口号根据自己的进行修改,  
 })

• 举例视图：复制左边代码,使用vue需要一个表头,进行实例:

<template>
  <div id="wansui" :style="{width: '100%', height: '600px'}"></div>
</template>

<script>
export default {
  data() {
    return {
      kk: []     //这里创建一个数组,后面使用
    };
  },

  //方法体放里面调用运行
  mounted() {
    	this.houtai();
  },

  methods: {
    //连接后台加载方法    	
    		<开始-1>	
    houtai() {
      this.$http
       .get("/user/getUserRegCount") //路径 <这里就是连接后端的一个方法  .get方法根据自己的修改>
        .then(response => {
          //把输出的内容返回给data
          this.kk = response.data;        
			<结束-1   中间是连接后台方法>
		
          // 基于准备好的dom，初始化echarts实例
          let wansui = this.$echarts.init(document.getElementById("wansui"));

          // 绘制图表
          wansui.setOption({
            title: {
              text: "用户数据报表",    		<复制echars的代码从这里开始,下面结束的位置有标记>
              subtext: "单位(个)"
            },
            tooltip: {
              trigger: "axis"
            },
            legend: {
              data: ["注册", "访问量"]
            },
            toolbox: {
              show: true,
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ["line", "bar"] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            calculable: true,
            xAxis: [
              {
                type: "category",
                data: ["1月", "2月", "3月", "4月", "5月", "6月"]
              }
            ],
            yAxis: [
              {
                type: "value"
              }
            ],
            series: [
              {
                name: "注册",
                type: "bar",

                //放入后台的数据      
                data: this.kk 	           //kk是一个数组,在这里进行全局的调用,赋值进去
              },
              {
                name: "访问量",       //访问量是死数据
                type: "bar",
                data: [50, 90, 80, 75, 65, 102],
                markPoint: {
                  data: [
                    { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
                    { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 }
                  ]
                },
                markLine: {
                  data: [{ type: "average", name: "平均值" }]
                }
              } 
            ]        				<到这里结束,这中间都是复制eharts的代码>
          });
        })
        .catch(error => {      <捕获异常>
          console.log(error);
        });
    }
  }
};
</script>

这里设置好之后去idea控制器层进行配置:

@CrossOrigin    //跨域连接,这个必须有的,其他注解看自己项目
@Controller
@RequestMapping("/user")        //路径名字
public class Usercontroller {   //类名

    @DubboConsumer
    UserService ser;

    @ResponseBody
    @RequestMapping(value = "/getUserRegCount",method = RequestMethod.GET)  //路径名
    public Object getUserRegCount(){
        return ser.getMonthRegCountUser();
    }

我用的是dubbo, 其他项目同理,把路径注解添加好,和vue一致.
到这里基本就结束了,看不懂的多看几遍,多试验,vue和ajax有很多相似之处,但他的调用方法体的顺序有些不同,所以我这里只有一个方法体,把其他方法进行了合并,在代码里我有很多注释,仔细查看.
注册量是连接后台和数据库,访问量是死数据,后台没有写完,这里我贴入我做的完成图:图片上注册的数据是已经打通的,其他安装依赖,基本配置,自行百度,非常简单.有什么不明白的地方留言,看到之后我会回复.