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需要一个表头,进行实例:

这里设置好之后去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有很多相似之处,但他的调用方法体的顺序有些不同,所以我这里只有一个方法体,把其他方法进行了合并,在代码里我有很多注释,仔细查看.
注册量是连接后台和数据库,访问量是死数据,后台没有写完,这里我贴入我做的完成图:图片上注册的数据是已经打通的,其他安装依赖,基本配置,自行百度,非常简单.有什么不明白的地方留言,看到之后我会回复.