数据展示（基于vue框架)

数据展示

数据展示（基于vue框架)
- vue框架的建立
- 对vue项目的编写
- - 导航栏
  - 顶部介绍
  - 第一个分析图表
  - 第二个分析图表
  - JS代码支持
  - 全部代码

vue框架的建立

新建vue项目
终端输入：

vue ui

图形化创建项目后
引入插件element-ui

对vue项目的编写

导航栏

效果：

 <div class="menu"><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#000000"text-color="#fff"active-text-color="#fff"menu-trigger="hover"><el-menu-item index="1" id="menu1"><a href="#1">数据分析</a></el-menu-item><el-menu-item index="2"><a href="#2">数据处理</a></el-menu-item><el-menu-item index="3"><a href="#3">数据展示</a></el-menu-item><el-menu-item index="4"><a href="#5">关于我们</a></el-menu-item></el-menu></div>

顶部介绍

效果：

<div class="thef" id="1"><div class="text"><h1 class="titile">DATA STATISTICS</h1><p class="coutin">Analyze a large amount of data collected with appropriate statisticalanalysis methods, summarize, understand and digest them, so as tomaximize the function of data and give full play to the role of data.</p></div></div>

css：

.thef {width: 100%;background-image: url(../src/components/Thefirst.jpg);background-repeat: no-repeat;background-position: right bottom;float: left;height: 500px;
}

第一个分析图表

效果：

<div class="chart" id="2"><p class="thectext">Date Analyze</p><div id="chart1"></div></div>

.chart {width: 100%;height: 600px;float: left;background-color: #171717;background-image: url(../src/components/thec.jpeg);background-repeat: no-repeat;background-position: left;background-size: 600px, 600px;background-origin: padding-box;
}

第二个分析图表

<div class="chart2" id="3" ><div id="chart2"></div><p class="chart2text">TheBrowserCount</p><div id="chart3"></div></div>

.chart2 {width: 100%;height: 600px;float: left;background-image: url(../src/components/thef.jpg);
}

JS代码支持

<script >
import * as echarts from "echarts";
export default {data() {return {activeIndex2: "1",};},mounted() {document.querySelector("body").setAttribute("style", "background-color:black");var chartDom = document.getElementById("chart1");var myChart = echarts.init(chartDom);var option;option = {dataset: {source: [["score", "amount", "product"],[80, 9686, "2017-11-30"],[10, 8780, "2017-11-02"],[60, 9045, "2017-11-21"],[40, 9025, "2017-11-16"],[50, 9033, "2017-11-15"],[70, 9625, "2017-12-04"],[90, 9832, "2017-11-09"],[20, 8874, "2017-11-18"],[30, 8970, "2017-11-14"],],},grid: { containLabel: true },xAxis: { name: "amount"},yAxis: { type: "category" },visualMap: {orient: "horizontal",left: "center",min: 10,max: 100,text: ["High Score", "Low Score"],// Map the score column to colordimension: 0,inRange: {color: ["#65B581", "#FFCE34", "#FD665F"],},},series: [{type: "bar",encode: {// Map the "amount" column to X axis.x: "amount",// Map the "product" column to Y axisy: "product",},},],};option && myChart.setOption(option);var chartDom2 = document.getElementById("chart2");var myChart2 = echarts.init(chartDom2);var option2;option2 = {backgroundColor: "transparent",title: {text: "Default Browser",left: "center",top: 60,textStyle: {color: "#E9E9E9",},},tooltip: {trigger: "item",},visualMap: {show: false,min: 0,max: 60,inRange: {colorLightness: [0, 1],},},series: [{name: "Access From",type: "pie",radius: "55%",center: ["50%", "50%"],data: [{ value: 31.919, name: "NULL" },{ value: 26.931, name: "360seURL" },{ value: 9.229, name: "iexplore.exe" },{ value: 8.142, name: "360ChromeURL" },{ value: 23.779, name: "Others" },].sort(function (a, b) {return a.value - b.value;}),roseType: "radius",label: {color: "rgba(255, 255, 255, 0.3)",},labelLine: {lineStyle: {color: "rgba(255, 255, 255, 0.3)",},smooth: 0.2,length: 10,length2: 20,},itemStyle: {color: "#aed54c",shadowBlur: 200,shadowColor: "rgba(0, 0, 0, 0.5)",},animationType: "scale",animationEasing: "elasticOut",animationDelay: function (idx) {return Math.random() * 200;},},],};option2 && myChart2.setOption(option2);var chartDom3 = document.getElementById("chart3");var myChart3 = echarts.init(chartDom3);var option3;option3 = {title: [{text: "",},],polar: {radius: [30, "80%"],},angleAxis: {max: 319186,startAngle: 75,},radiusAxis: {type: "category",data: ["QQBrowser", "360ChromeURL", "iexplore.exe", "360seURL"],textStyle: {color: "#fff",},},tooltip: {},series: {type: "bar",data: [60761, 81420, 92285, 269305],coordinateSystem: "polar",label: {show: true,position: "middle",formatter: "{b}: {c}",textStyle: {color: "#fff",},},},};option3 && myChart3.setOption(option3);var chartDom4 = document.getElementById("chart4");var myChart4 = echarts.init(chartDom4);var option4;option4 = {tooltip: {trigger: "item",},legend: {top: "5%",left: "center",textStyle: {color: "#fff",},},series: [{name: "Access From",type: "pie",radius: ["40%", "70%"],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: "#fff",borderWidth: 2,},label: {show: false,position: "center",},emphasis: {label: {show: true,fontSize: "40",fontWeight: "bold",},},labelLine: {show: false,},data: [{ value: 37710, name: "rc=4" },{ value: 21569, name: "offasr" },{ value: 11457, name: "application" },{ value: 8080, name: "websearch" },{ value: 6491, name: "website" },],},],};option4 && myChart4.setOption(option4);var chartDom5 = document.getElementById("chart5");var myChart5 = echarts.init(chartDom5);var option5;// prettier-ignorelet dataAxis = ['9', '1017', '25', '1195', '226', '200', '1122', '1012', '12', ];// prettier-ignorelet data = [17054, 7218, 6917, 5084, 4667, 3428, 3824, 2349, 1989];let yMax = 500;let dataShadow = [];for (let i = 0; i < data.length; i++) {dataShadow.push(yMax);}option5 = {title: {text: "",subtext: "",},xAxis: {data: dataAxis,axisLabel: {inside: true,color: "#fff",},axisTick: {show: false,},axisLine: {show: false,},z: 10,},yAxis: {axisLine: {show: false,},axisTick: {show: false,},axisLabel: {color: "#999",},},dataZoom: [{type: "inside",},],series: [{type: "bar",showBackground: true,itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#83bff6" },{ offset: 0.5, color: "#188df0" },{ offset: 1, color: "#188df0" },]),},emphasis: {itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#2378f7" },{ offset: 0.7, color: "#2378f7" },{ offset: 1, color: "#83bff6" },]),},},data: data,},],};// Enable data zoom when user click bar.const zoomSize = 6;myChart5.on("click", function (params) {console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);myChart5.dispatchAction({type: "dataZoom",startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],endValue:dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],});});option5 && myChart5.setOption(option5);},created() {},beforeDestroy() {document.querySelector("body").removeAttribute("style");},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);},},beforeCreate() {},
};
</script>

全部代码

<template><div id="app"><div class="menu"><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#000000"text-color="#fff"active-text-color="#fff"menu-trigger="hover"><el-menu-item index="1" id="menu1"><a href="#1">数据分析</a></el-menu-item><el-menu-item index="2"><a href="#2">数据处理</a></el-menu-item><el-menu-item index="3"><a href="#3">数据展示</a></el-menu-item><el-menu-item index="4"><a href="#5">关于我们</a></el-menu-item></el-menu></div><div class="none"></div><div class="thef" id="1"><div class="text"><h1 class="titile">DATA STATISTICS</h1><p class="coutin">Analyze a large amount of data collected with appropriate statisticalanalysis methods, summarize, understand and digest them, so as tomaximize the function of data and give full play to the role of data.</p></div></div><div class="chart" id="2"><p class="thectext">Date Analyze</p><div id="chart1"></div></div><div class="chart2" id="3" ><div id="chart2"></div><p class="chart2text">TheBrowserCount</p><div id="chart3"></div></div><div class="chart4" ><div id="chart4"></div><p class="chart4text"> = TheSceneOpenCount</p></div><div class="chart5" id="4"><div id="chart5"></div><p class="chart5text">UserID Count</p></div><div class="bottom" id="5"><h4 class="bot1">关于我们</h4><div class="pohon"><p style="font-size:15px;margin-left:80px;">联系我们</p><p style="margin-left:20px;">商务合作:  袁先生:1184468117</p><p style="margin-left:75px;">王女士:1803044110</p></div><div class="bot2"><p class="bot3" style="font-size:15px">联系地址</p><p class="bot4">安徽省芜湖市鸠江区梦溪路安徽工程大学国际工程师学院</p></div></div></div>
</template>
<script >
import * as echarts from "echarts";
export default {data() {return {activeIndex2: "1",};},mounted() {document.querySelector("body").setAttribute("style", "background-color:black");var chartDom = document.getElementById("chart1");var myChart = echarts.init(chartDom);var option;option = {dataset: {source: [["score", "amount", "product"],[80, 9686, "2017-11-30"],[10, 8780, "2017-11-02"],[60, 9045, "2017-11-21"],[40, 9025, "2017-11-16"],[50, 9033, "2017-11-15"],[70, 9625, "2017-12-04"],[90, 9832, "2017-11-09"],[20, 8874, "2017-11-18"],[30, 8970, "2017-11-14"],],},grid: { containLabel: true },xAxis: { name: "amount"},yAxis: { type: "category" },visualMap: {orient: "horizontal",left: "center",min: 10,max: 100,text: ["High Score", "Low Score"],// Map the score column to colordimension: 0,inRange: {color: ["#65B581", "#FFCE34", "#FD665F"],},},series: [{type: "bar",encode: {// Map the "amount" column to X axis.x: "amount",// Map the "product" column to Y axisy: "product",},},],};option && myChart.setOption(option);var chartDom2 = document.getElementById("chart2");var myChart2 = echarts.init(chartDom2);var option2;option2 = {backgroundColor: "transparent",title: {text: "Default Browser",left: "center",top: 60,textStyle: {color: "#E9E9E9",},},tooltip: {trigger: "item",},visualMap: {show: false,min: 0,max: 60,inRange: {colorLightness: [0, 1],},},series: [{name: "Access From",type: "pie",radius: "55%",center: ["50%", "50%"],data: [{ value: 31.919, name: "NULL" },{ value: 26.931, name: "360seURL" },{ value: 9.229, name: "iexplore.exe" },{ value: 8.142, name: "360ChromeURL" },{ value: 23.779, name: "Others" },].sort(function (a, b) {return a.value - b.value;}),roseType: "radius",label: {color: "rgba(255, 255, 255, 0.3)",},labelLine: {lineStyle: {color: "rgba(255, 255, 255, 0.3)",},smooth: 0.2,length: 10,length2: 20,},itemStyle: {color: "#aed54c",shadowBlur: 200,shadowColor: "rgba(0, 0, 0, 0.5)",},animationType: "scale",animationEasing: "elasticOut",animationDelay: function (idx) {return Math.random() * 200;},},],};option2 && myChart2.setOption(option2);var chartDom3 = document.getElementById("chart3");var myChart3 = echarts.init(chartDom3);var option3;option3 = {title: [{text: "",},],polar: {radius: [30, "80%"],},angleAxis: {max: 319186,startAngle: 75,},radiusAxis: {type: "category",data: ["QQBrowser", "360ChromeURL", "iexplore.exe", "360seURL"],textStyle: {color: "#fff",},},tooltip: {},series: {type: "bar",data: [60761, 81420, 92285, 269305],coordinateSystem: "polar",label: {show: true,position: "middle",formatter: "{b}: {c}",textStyle: {color: "#fff",},},},};option3 && myChart3.setOption(option3);var chartDom4 = document.getElementById("chart4");var myChart4 = echarts.init(chartDom4);var option4;option4 = {tooltip: {trigger: "item",},legend: {top: "5%",left: "center",textStyle: {color: "#fff",},},series: [{name: "Access From",type: "pie",radius: ["40%", "70%"],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: "#fff",borderWidth: 2,},label: {show: false,position: "center",},emphasis: {label: {show: true,fontSize: "40",fontWeight: "bold",},},labelLine: {show: false,},data: [{ value: 37710, name: "rc=4" },{ value: 21569, name: "offasr" },{ value: 11457, name: "application" },{ value: 8080, name: "websearch" },{ value: 6491, name: "website" },],},],};option4 && myChart4.setOption(option4);var chartDom5 = document.getElementById("chart5");var myChart5 = echarts.init(chartDom5);var option5;// prettier-ignorelet dataAxis = ['9', '1017', '25', '1195', '226', '200', '1122', '1012', '12', ];// prettier-ignorelet data = [17054, 7218, 6917, 5084, 4667, 3428, 3824, 2349, 1989];let yMax = 500;let dataShadow = [];for (let i = 0; i < data.length; i++) {dataShadow.push(yMax);}option5 = {title: {text: "",subtext: "",},xAxis: {data: dataAxis,axisLabel: {inside: true,color: "#fff",},axisTick: {show: false,},axisLine: {show: false,},z: 10,},yAxis: {axisLine: {show: false,},axisTick: {show: false,},axisLabel: {color: "#999",},},dataZoom: [{type: "inside",},],series: [{type: "bar",showBackground: true,itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#83bff6" },{ offset: 0.5, color: "#188df0" },{ offset: 1, color: "#188df0" },]),},emphasis: {itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#2378f7" },{ offset: 0.7, color: "#2378f7" },{ offset: 1, color: "#83bff6" },]),},},data: data,},],};// Enable data zoom when user click bar.const zoomSize = 6;myChart5.on("click", function (params) {console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);myChart5.dispatchAction({type: "dataZoom",startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],endValue:dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],});});option5 && myChart5.setOption(option5);},created() {},beforeDestroy() {document.querySelector("body").removeAttribute("style");},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);},},beforeCreate() {},
};
</script><style>
.bot2{color:#AAB7AB;font-size: 10px;margin: 50px;float: left;
}
.pohon{color:#AAB7AB;float: left;font-size: 10px;margin: 50px;
}
.bot1{color: #AAB7AB;margin-top:  40px;margin-left: 40px;float: left;
}
a{text-decoration: none;
}
.bottom{width: 100%;height: 150px;float: left;
}
#app {background-attachment: fixed;
}
.menu {width: 100%;background-color: #171718;
}
.el-menu-demo {padding-left: 380px;font-family: "PingFang SC";position: fixed;width: 100%;margin-top: -8px;
}
.none {width: 100%;height: 120px;
}
.thef {width: 100%;background-image: url(../src/components/Thefirst.jpg);background-repeat: no-repeat;background-position: right bottom;float: left;height: 500px;
}
.text {float: left;margin-left: 200px;width: 30%;
}
.titile {color: #5a8903;font-family: Helvetica;letter-spacing: 5px;margin-right: 10%;font-size: 60px;
}
.coutin {color: #fff;margin-top: 30px;line-height: 35px;font-size: 20px;
}
.chart {width: 100%;height: 600px;float: left;background-color: #171717;background-image: url(../src/components/thec.jpeg);background-repeat: no-repeat;background-position: left;background-size: 600px, 600px;background-origin: padding-box;
}
.thectext {color: #5a8903;font-size: 50px;font-weight: bold;font-family: "微软雅黑";margin-left: 60%;float: left;margin-top: 10px;
}
#chart1 {height: 500px;width: 800px;margin-left: 44%;margin-top: 100px;
}
.chart2 {width: 100%;height: 600px;float: left;background-image: url(../src/components/thef.jpg);
}
#chart2 {height: 600px;width: 600px;margin-top: 4%;margin-left: 100px;float: left;
}
#chart3 {height: 500px;width: 500px;margin-top: 5%;right: -4%;float: left;color: #fff;
}
.chart2text {color: white;font-size: 50px;font-weight: bold;font-family: "微软雅黑";width: 5px;float: left;margin: 0px;
}
.chart4 {width: 100%;height: 450px;float: left;background-image: url(../src/components/chartfc.jpg);background-repeat: no-repeat;background-position: -300px top;
}
#chart4 {height: 500px;width: 500px;float: left;margin-left: 100px;
}
.chart5 {width: 100%;height: 450px;float: left;background-image: url(../src/components/chartfrc.jpg);background-repeat: no-repeat;background-position: left bottom;background-size: 150% 450px;
}
#chart5 {height: 450px;width: 500px;float: right;margin-right: 50px;
}
.chart4text{color: white;font-size: 30px;margin-top: 200px;
}
.chart5text{color: #fff;font-size: 40px;margin-top: 225px;margin-left: 500px;
}
</style>

项目笔记二-----------------数据展示相关推荐

企业级博客项目笔记(二)
企业级博客项目笔记(二) 一.数据持久化 1.JPA简介 JPA(Java Persistence API)是用于管理Java EE 和Java SE 环境中的持久化,以及对象/关系映射的Java A ...
微信公众号项目笔记二
一.项目介绍通过公众号页面调用系统接口,完成物流系统客户签收功能. 1界面展示使用html5+css布局,使用weui样式库. 2Web项目使用asp.net MVC4技术.接口调用使用jquer ...
尚硅谷外卖项目笔记二
目录 1. 商家整体界面搭建 2. 模拟(mock)数据/接口 3. vue transition动画 4. 滚动实现(better-scroll) 5. 滚动右边食物列表,同步更新左侧菜单 6. 点 ...
cocos2dx打飞机项目笔记二：BulletLayer类
BulletLayer.h 内容如下 1 class BulletLayer : public cocos2d::CCLayer 2 { 3 4 public: 5 6 CC_SYNTHESIZE(b ...
Python网络爬虫项目实战(二)数据解析
上一篇说完了如何爬取一个网页,以及爬取中可能遇到的几个问题.那么接下来我们就需要对已经爬取下来的网页进行解析,从中提取出我们想要的数据. 根据爬取下来的数据,我们需要写不同的解析方式,最常见的一般都是 ...
IDEA导入项目笔记二
1. Error:java: 无效的目标发行版: 11 file–>project structure–> file–>setting–> 2. org.apache.ibat ...
树莓派魔镜项目——笔记二 Docker软件安装
Windows平台只需要安装有Docker Desktop,然后按照操作执行命令即可. Installation of this RepositoryPermalink Open a shell in ...
树莓派魔镜项目——笔记一项目介绍和内容链接
佩服这哥们"想到就去做"的精神和动手能力,以及广大coder的开源精神. 原帖: 树莓派磨制"魔镜"全记录 | 树莓派实验室社区一键安装的开源树莓派魔镜项目 ...
学习笔记之数据可视化（一）——项目适配方案
目录最终效果展示 1. 数据可视化适配方案 1.1 项目需求 1.2 PC端适配方案 1.3 使用到的技术 2. 数据可视化项目开发项目准备 1.1 文件准备 1.2 引入js和css文件 1.3 ...

项目笔记二-----------------数据展示

数据展示（基于vue框架)

数据展示

vue框架的建立

对vue项目的编写

导航栏

顶部介绍

第一个分析图表

第二个分析图表

JS代码支持

全部代码

项目笔记二-----------------数据展示相关推荐

最新文章

热门文章