html引入vue组件，vue组件中使用echarts
将图设置代码写在vue的methods中，然后在mounted中调用得到echarts图<div id="pushed" style="width: 630px;height:300px;float: left;margin-right:30px"></div>var myChart = echarts.init(document.getElementById(...
·
将图设置代码写在vue的methods中，然后在mounted中调用
- 得到echarts图
<div id="pushed" style="width: 630px;height:300px;float: left;margin-right:30px"></div>
var myChart = echarts.init(document.getElementById('pushed'));
- 完整代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/multiple-select.min.css">
<script type="text/javascript" src="/js/jquery/multiple-select.min.js"></script>
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
<!--新引入的css-->
<link rel="stylesheet" type="text/css" href="/css/master.css">
<link rel="stylesheet" type="text/css" href="/css/animate.delay.css">
<link rel="stylesheet" type="text/css" href="/css/animate.min.css">
<link rel="stylesheet" type="text/css" href="/css/description.scss">
<link rel="stylesheet" type="text/css" href="/css/element-ui.scss">
<link rel="stylesheet" type="text/css" href="/css/index.scss">
<link rel="stylesheet" type="text/css" href="/css/mixin.scss">
<link rel="stylesheet" type="text/css" href="/css/sidebar.scss">
<link rel="stylesheet" type="text/css" href="/css/transition.scss">
<link rel="stylesheet" type="text/css" href="/css/variables.scss">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!--vue注册-->
<div id="app">
<div class="dashboard-editor-container">
<el-row class="box">
<div class="box-body box-form">
<el-form :inline="true" :model="formInline" size="mini">
<div class="conditions pull-left" style="width: calc(100% - 150px);">
<el-form-item label="统计时段">
<el-date-picker
v-model="formInline.time"
type="daterange"
align="right"
value-format="yyyy-MM-dd"
:editable="false"
@change="dateChange"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item label="知识使用情况">
<el-select size="mini" v-model="formInline.useSituation" placeholder="知识使用情况">
<template v-for="item in useSituations">
<el-option :label="item.name" :value="item.code"></el-option>
</template>
</el-select>
</el-form-item>
<el-form-item label="知识体系">
<el-select size="mini" v-model="formInline.system" placeholder="知识体系">
<template v-for="item in systems">
<el-option :label="item.name" :value="item.code"></el-option>
</template>
</el-select>
</el-form-item>
</div>
<div class="action pull-right">
<el-form-item>
<el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>　开始分析</el-button>
</el-form-item>
</div>
</el-form>
</div>
</el-row>
<el-row class="box">
<div class="box-header">
<h3 class="box-title">　知识使用占比</h3>
</div>
<div class="box-body">
<div>
<div id="pushed" style="width: 630px;height:300px;float: left;margin-right:30px"></div>
<div id="adopted" style="width: 630px;height:300px;float: left;"></div>
</div>
</div>
</el-row>
</div>
</div>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var app = new Vue({
el: "#app",
components: {
},
data: {
minDate: null,
maxDate: null,
pickerOptions: {
onPick: (date) => {
this.maxDate = date.maxDate;
this.minDate = date.minDate;
},
disabledDate: (time) => {
if (null != this.minDate) {
let min = new Date(this.minDate.getTime());
let max = new Date(this.minDate.getTime());
min.setFullYear(this.minDate.getFullYear() - 1);
max.setFullYear(this.minDate.getFullYear() + 1);
return time.getTime() > max || time.getTime() < min;
}
return false;
},
shortcuts: [{
text: '昨日',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24)
end.setTime(end.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', [start, end])
}
}, {
text: '本周',
onClick(picker) {
const end = new Date()
const start = new Date()
let week = start.getDay() || 7;
start.setTime(start.getTime() - 3600 * 1000 * 24 * (week - 1))
picker.$emit('pick', [start, end])
}
}, {
text: '上周',
onClick(picker) {
const end = new Date()
const start = new Date()
let week = start.getDay() || 7;
start.setTime(start.getTime() - 3600 * 1000 * 24 * (week - 1))
end.setTime(start.getTime() - 3600 * 1000 * 24);
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '上月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 1)
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDate() - 1))
let d = new Date(start.getFullYear(), (start.getMonth() + 1), 0);
let day = d.getDate();
end.setTime(start.getTime() + 3600 * 1000 * 24 * (day - 1))
picker.$emit('pick', [start, end])
}
}, {
text: '本月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setDate(1);
picker.$emit('pick', [start, end])
}
}, {
text: '今年',
onClick(picker) {
const end = new Date()
const start = new Date()
//start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 12)
start.setMonth(0);
start.setDate(1);
picker.$emit('pick', [start, end])
}
}]
},
formInline: {
time: [],
useSituation: '',
system: ''
},
useSituations: [
{name:"已推送",code:"pushed"},
{name:"已采纳",code:"adopted"},
{name:"未采纳",code:"unAdopted"}
],
systems: [
{name:"知识体系1",code:"first"},
{name:"知识体系2",code:"second"},
{name:"知识体系3",code:"third"}
],
reloadComponent: false
},
// 从数据库拿数据动态显示
mounted() {
//调用获取echarts的option的方法
this.getPushedPie();
this.getAdoptedPie();
},
methods: {
getPushedPie() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('pushed'));
var option = {// 指定图表的配置项和数据
title: {
text: '已推送占比',
left: 'center'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['已推送','未推送']
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [
{
name: '知识使用占比',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 15, name: '已推送'},
{value: 11, name: '未推送'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
getAdoptedPie() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('adopted'));
var option = {// 指定图表的配置项和数据
title: {
text: '已采纳占比',
left: 'center'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['已采纳','未采纳']
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [
{
name: '知识使用占比',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 15, name: '已采纳'},
{value: 11, name: '未采纳'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
}
});
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
background-color: rgb(240, 242, 245);
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
</style>
</body>
</html>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献7条内容
所有评论(0)