[JavaScript知识库]VUE集成echarts

(找了很久的资源总结)

NPM 安装 ECharts

1.你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

2.修改echarts的版本号（4.8.0）

这是旧版本，新版本集成之后报错（init初始化的问题）

3.在终端运行

num i

4.在main.js引入

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

5.代码展示(前后端交互引入)

<template>
<div class="data-view">
	<el-card>
		<div id="main1" style="width: 400px; height: 400px;" ></div>
	</el-card>
</div>
</template>

<script>
	export default {
		
		data() {
			return {
		
			
			};
		},mounted(){
this.getdata();
			

// var myChart1 = this.$echarts.init(document.getElementById('main2'));
//  let option={
// 	 title:{
// 		 text:'大佬进阶过程'
// 	 },
// 	 tooltip:{
		 
// 	 },
// 	 legend:{
// 		 data:['邮件营销','蓝梦广告','视频广告','直接访问','搜索引擎']
// 	 },
// 	 xAxis:{
// 		 type:"category",
// 		 boundaryGap:false,
// 	 				 data:['周一','周二','周三','周四','周五','周六','周日']
// 	 },
// 	 yAxis:{
// 		 type:'value'
// 	 },
// 	 series:[{
// 	 				 name:'邮件营销',
// 	 				 type:'line',
// 					 stack:'总量',
// 	 				 data:[43,67,23,23,43,23]
// 	 },
// 	 {
// 	 				 name:'蓝梦广告',
// 	 				 type:'line',
// 	 					 stack:'总量',
// 	 				 data:[43,64,23,34,43,54]
// 	 },
// 	 {
// 	 				 name:'视频广告',
// 	 				 type:'line',
// 	 					 stack:'总量',
// 	 				 data:[43,26,23,23,45,54]
// 	 },
// 	 {
// 	 				 name:'直接访问',
// 	 				 type:'line',
// 	 					 stack:'总量',
// 	 				 data:[43,22,55,23,43,54]
// 	 },
// 	 {
// 	 				 name:'搜索引擎',
// 	 				 type:'line',
// 	 					 stack:'总量',
// 	 				 data:[66,343,23,23,43,54]
// 	 }
// 	 ]
	 
//  }
//  myChart1.setOption(option)
		},
		methods: {
			viewtype(arr1,arr2){
				var myChart = this.$echarts.init(document.getElementById('main1'));
				myChart.setOption({
							 title:{
								 text:'餐厅种类及每个餐厅的销量'
							 },
							 xAxis:{
								 data:arr1
							 },
							 yAxis:{},
							 series:[{
								 name:'人数',
								 type:'bar',
								 data:arr2
							 }]
				})
			},
			getdata() {
				Promise.all([this.$http.get("streportfoodadv")
				
				]).then((data)=>{
					console.log(data[0].data.data.x)
					var type=data[0].data.data.x;
					var num=data[0].data.data.y;
					this.viewtype(type,num)
				})
				
			}
		},
		created() {
			 }		
	};
</script>

后端数据用map封装传入

controller层

    @RequestMapping(value ="/streportfoodadv")
    public CommonResult streportfood(){

        try {
            Map<String,List> map = foodservice.streportfoodadv();
            return new CommonResult(200, "查找成功",map);
        } catch (Exception e) {
            e.printStackTrace();
            return new CommonResult<>(300, "查找失败",  null);
        }
    }

service层

    public Map<String, List> streportfoodadv() {
        Map<String, List> map = new HashMap<>();
        List<String> typeList = fooddao.findTypeName();
        List<Integer> countList = fooddao.countByTypeList();
        map.put("x", typeList);
        map.put("y", countList);
        return map;
    }

dao层

    List<String> findTypeName();

    List<Integer> countByTypeList();

mapper

    <select id="countByTypeList" resultType="java.lang.Integer">
SELECT COUNT(fd.type) FROM food f LEFT JOIN foodadv fd ON f.foodnameID=fd.id  GROUP BY fd.type
    </select>
    <select id="findTypeName" resultType="java.lang.String">
        SELECT fd.type FROM food f LEFT JOIN foodadv fd ON f.foodnameID=fd.id  GROUP BY fd.type
    </select>