本项主要介绍echart+element ui+vue成功搭建CDN项目。其中包含了echart兼容页面缩放，自适应浏览器宽度；element栅栏布局。
一、前期准备
- vue使用vue.min.js
- element ui使用elementui-2.12.0
- echart使用基础版的echarts.js
小技巧：将上述准备需要下载到本地，提高页面加载的速度。传送门→
二、搭建与使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户总量统计</title>
<!-- import CSS -->
<link rel="stylesheet" href="./elementui-2.12.0/index.css">
<!-- <link rel="stylesheet" href="./css/app.css"> -->
<!-- <link rel="stylesheet" href="./css/index.css"> -->
<link rel="stylesheet" href="./css/statisticalUser.css">
</head>
<body>
<div id="app" class="contain_wrapper">
<el-row>
<el-col :span="24">
<div class="line_bar_info">
<div class="line_bar_name">各系统用户总量</div>
<div class="line_bar_sub">数据来源：WorldClimate.com</div>
<i class="el-icon-more toggle_icon"></i>
</div>
<div class="line_bar_wrapper">
<div class="line_bar" id="echartLineBar"></div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="16">
<div class="statistical_module_wrapper">
<div class="statistical_module_name">文献中心用户总量统计</div>
<table width="80%" class="table">
<tr>
<td>序号</td>
<td>用户类型</td>
<td>用户数量</td>
<td>合计</td>
</tr>
<tr>
<td class="count_number_name">1</td>
<td>个人用户</td>
<td class="count_number_name">10</td>
<td rowspan="2" class="count_number_name"> 30</td>
</tr>
<tr>
<td class="count_number_name">2</td>
<td>机构用户</td>
<td class="count_number_name">20</td>
</tr>
</table>
</div>
</el-col>
<el-col :span="8">
<div class="statistical_module"></div>
<div class="echart_pie_wrapper">
<div class="echart_pie" id="echartPie"></div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="16">
<div class="statistical_module_wrapper">
<div class="statistical_module_name">期刊库用户总量统计</div>
<table width="80%" class="table">
<tr>
<td>序号</td>
<td>用户类型</td>
<td>用户数量</td>
<td>合计</td>
</tr>
<tr>
<td class="count_number_name">1</td>
<td>个人用户</td>
<td class="count_number_name">10</td>
<td rowspan="2" class="count_number_name"> 30</td>
</tr>
<tr>
<td class="count_number_name">2</td>
<td>机构用户</td>
<td class="count_number_name">20</td>
</tr>
</table>
</div>
</el-col>
<el-col :span="8">
<div class="statistical_module"></div>
<div class="echart_pie_wrapper">
<div class="echart_pie" id="echartPie2"></div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="16">
<div class="statistical_module_wrapper">
<div class="statistical_module_name">外文期刊用户总量统计</div>
<table width="80%" class="table">
<tr>
<td>序号</td>
<td>用户类型</td>
<td>用户数量</td>
<td>合计</td>
</tr>
<tr>
<td class="count_number_name">1</td>
<td>个人用户</td>
<td class="count_number_name">10</td>
<td rowspan="2" class="count_number_name"> 30</td>
</tr>
<tr>
<td class="count_number_name">2</td>
<td>机构用户</td>
<td class="count_number_name">20</td>
</tr>
</table>
</div>
</el-col>
<el-col :span="8">
<div class="statistical_module"></div>
<div class="echart_pie_wrapper">
<div class="echart_pie" id="echartPie3"></div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="16">
<div class="statistical_module_wrapper">
<div class="statistical_module_name">古籍系统用户总量统计</div>
<table width="80%" class="table">
<tr>
<td>序号</td>
<td>用户类型</td>
<td>用户数量</td>
<td>合计</td>
</tr>
<tr>
<td class="count_number_name">1</td>
<td>个人用户</td>
<td class="count_number_name">10</td>
<td rowspan="2" class="count_number_name"> 30</td>
</tr>
<tr>
<td class="count_number_name">2</td>
<td>机构用户</td>
<td class="count_number_name">20</td>
</tr>
</table>
</div>
</el-col>
<el-col :span="8">
<div class="statistical_module"></div>
<div class="echart_pie_wrapper">
<div class="echart_pie" id="echartPie4"></div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="16">
<div class="statistical_module_wrapper">
<div class="statistical_module_name">习文库用户总量统计</div>
<table width="80%" class="table">
<tr>
<td>序号</td>
<td>用户类型</td>
<td>用户数量</td>
<td>合计</td>
</tr>
<tr>
<td class="count_number_name">1</td>
<td>个人用户</td>
<td class="count_number_name">10</td>
<td rowspan="2" class="count_number_name"> 30</td>
</tr>
<tr>
<td class="count_number_name">2</td>
<td>机构用户</td>
<td class="count_number_name">20</td>
</tr>
</table>
</div>
</el-col>
<el-col :span="8">
<div class="statistical_module"></div>
<div class="echart_pie_wrapper">
<div class="echart_pie" id="echartPie5"></div>
</div>
</el-col>
</el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="./js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./elementui-2.12.0/index.js"></script>
<script src="./js/echarts.js"></script>
<script>
var echartLineBar, echartPie, echartPie2, echartPie3, echartPie4, echartPie5;
new Vue({
el: '#app',
data: function () {
return {
visible: false,
/**
* 各系统用户总量
**/
systemData: [
{
name: "文献中心", value: 50 },
{
name: "期刊库", value: 75 },
{
name: "外文期刊库", value: 110 },
{
name: "古籍库", value: 130 },
{
name: "习文库", value: 150 },
{
name: "5", value: 180 },
{
name: "6", value: 150 },
{
name: "7", value: 170 },
{
name: "8", value: 220 },
{
name: "9", value: 190 },
{
name: "10", value: 90 },
{
name: "11", value: 50 }
],
countData: [
{
value: 20, name: '个人用户' },
{
value: 10, name: '机构用户' },
]
}
},
mounted: function () {
this.init();
var that = this;
window.onresize = function () {
that.echartResize();
};
},
methods: {
/**
* 初始化
**/
init: function () {
echartLineBar = this.initLineBar("echartLineBar", this.systemData);
echartPie = this.initPie("echartPie", this.countData);
echartPie2 = this.initPie("echartPie2", this.countData);
echartPie3 = this.initPie("echartPie3", this.countData);
echartPie4 = this.initPie("echartPie4", this.countData);
echartPie5 = this.initPie("echartPie5", this.countData);
},
/**
* 重置echart
**/
echartResize: function () {
setTimeout(function () {
if (echartLineBar) {
echartLineBar.resize();
}
if (echartPie) {
echartPie.resize();
}
if (echartPie2) {
echartPie2.resize();
}
if (echartPie3) {
echartPie3.resize();
}
if (echartPie4) {
echartPie4.resize();
}
if (echartPie5) {
echartPie5.resize();
}
}, 100);
},
/**
* 初始化echartLineBar
**/
initLineBar: function (myChartId, data, myChart) {
var dataList = [], arrayList = [];
for (var i = 0, e; i < data.length; i++) {
e = data[i];
dataList.push(e.name);
arrayList.push(e.value);
}
if (!myChart) {
myChart = echarts.init(document.getElementById(myChartId));
}
var option = {
color: ['rgb(132,182,238)'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '70',
right: '50',
bottom: '0',
top: '20',
containLabel: true
},
xAxis: [
{
type: 'category',
data: dataList,
axisTick: {
alignWithLabel: true
},
axisLabel: {
padding: [10, 0, 0, 0],
color: 'rgb(139,125,124)',
textStyle: {
fontSize: 14
},
interval: 0,// 横轴信息全部显示
rotate: 30,// 角度倾斜显示
},
axisLine: {
lineStyle: {
color: '#D3DBEE',
width: 1
}
}
}
],
yAxis: [
{
name: "用户量(名)",
nameLocation: 'middle',
nameTextStyle: {
color: 'rgb(139,125,124)',
fontSize: 16,
padding: [0, 0, 30, 0],
},
type: 'value',
splitNumber: 2,
axisLabel: {
color: 'rgb(139,125,124)',
textStyle: {
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: "rgba(0,0,0,0)",
width: 1
}
},
// 间隔色
splitLine: {
lineStyle: {
color: "#EFEFEF"
}
}
}
],
series: [
{
name: '用户总量',
type: 'bar',
barWidth: '50%',
data: arrayList
}
],
legend: {
data: [
{
name: '用户总量',
icon: 'circle',
textStyle: {
fontWeight: 'bold',
fontSize: 16,
}
}
],
verticalAlign: 'bottom', //垂直方向位置
y: 'bottom' //距离Y轴的距离
},
};
myChart.setOption(option, true);
return myChart;
},
/**
* 初始化echartPie
**/
initPie: function (myChartId, data, myChart) {
if (!myChart) {
myChart = echarts.init(document.getElementById(myChartId));
}
var option = {
color: ['#1D4981', '#3E6EA6'],
title: {
text: '{value|' + '用户类型总量占比' + '}',
left: 'center',
},
textStyle: {
//标题内容的样式
rich: {
value: {
color: '#333',
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "normal",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontSize: 14//主题文字字体大小，默认为18px
}
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [
{
name: '用户类型总量占比',
type: 'pie',
radius: '70%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "#fff"
}
},
label: {
normal: {
formatter: function (params) {
var percent = "{per|" + params.percent + "%}"
return "{b|" + params.data.name + "}" + percent;
},
rich: {
// 提示文字颜色
b: {
color: "#1F0A0F",
fontSize: 10,
align: "left",
fontWeight: "bold"
},
// 百分比
per: {
color: "#1F0A0F",
fontSize: 10,
align: "left",
fontWeight: "bold"
}
}
}
}
}
]
};
myChart.setOption(option, true);
return myChart;
}
}
})
</script>
</html>
三、案例图
转载：https://blog.csdn.net/qq_38209578/article/details/112787917
查看评论