动态配置生成echarts图表
动态配置x轴和y轴的数据，并且可以选择柱状图、折线图、饼状图等图形
父组件代码：
<template>
<div class="reportPicture">
<div class="reportPicture_inner">
<header>
<span>图形设置</span>
<ul>
<li
v-for="(item,index) in graphList"
:key="item.id"
:class="{ 'highLight':index == currentIndex }"
@click="currentIndex = index;currentType = item.type"
>
<img :src="graphIcon(item.type)" />
<span>{{item.name}}</span>
</li>
</ul>
</header>
<main>
<aside>
<el-tabs v-model="activeTab">
<el-tab-pane label="X轴" name="x">
<div class="tab_item">
<ul>
<el-scrollbar style="height: 100%">
<li
v-for="item in xList"
:key="item.id"
:class="{'highLight':item.selected}"
@click="toggleSeletX(item)"
>
{{item.name}}
</li>
</el-scrollbar>
</ul>
</div>
</el-tab-pane>
<el-tab-pane label="Y轴" name="y">
<div class="tab_item" v-show="showTwo">
<section>
<span>柱状：</span>
<ul>
<el-scrollbar style="height: 100%">
<li
v-for="item in barList"
:key="item.id"
:class="{'highLight':item.selected}"
@click="toggleSelet(item)"
>
{{item.name}}
</li>
</el-scrollbar>
</ul>
</section>
<section>
<span>折线：</span>
<ul>
<el-scrollbar style="height: 100%">
<li
v-for="item in lineList"
:key="item.id"
:class="{'highLight':item.selected}"
@click="toggleSelet(item)"
>
{{item.name}}
</li>
</el-scrollbar>
</ul>
</section>
</div>
<ul v-show="!showTwo">
<el-scrollbar style="height: 100%">
<li
v-for="item in yList"
:key="item.id"
:class="{'highLight':item.selected}"
@click="toggleSelet(item)"
>
{{item.name}}
</li>
</el-scrollbar>
</ul>
</el-tab-pane>
</el-tabs>
<footer>
<el-button
size="mini"
type="danger"
plain
@click="handle_addPicture"
>生成图形</el-button
>
<el-button size="mini" type="danger" @click="saveImage"
>保存图形</el-button
>
</footer>
</aside>
<main>
<header>
<div class="input_box">
<el-input
size="mini"
type="text"
placeholder="请输入"
v-model="chartData.title"
clearable
></el-input>
</div>
</header>
<div class="chart_box">
<div id="chart">
<line-chart
ref="line"
class="line"
v-if="currentType == 'line'"
:chartData="chartData"
/>
<pie-chart
ref="pie"
class="pie"
v-if="currentType == 'pie'"
:chartData="chartData"
/>
<bar-chart
ref="bar2"
class="bar2"
v-if="currentType == 'bar2'"
:chartData="chartData"
/>
<bar-chart-horizental
ref="bar1"
class="bar1"
v-if="currentType == 'bar1'"
:chartData="chartData"
/>
<line-bar-chart
ref="lineBar"
class="lineBar"
v-if="currentType == 'lineBar'"
:chartData="chartData"
/>
</div>
</div>
</main>
</main>
</div>
</div>
</template>
<script>
import echarts from 'echarts';
import PieChart from '@/views/dashboard/PieChart';
import BarChart from '@/views/dashboard/BarChart';
import LineChart from '@/views/dashboard/LineChart';
import BarChartHorizental from '@/views/dashboard/BarChartHorizental';
import LineBarChart from '@/views/dashboard/LineBarChart';
export default {
name: 'reportPicture',
components: {
LineChart, PieChart, BarChart, BarChartHorizental, LineBarChart
},
data() {
return {
activeTab: 'x',
graphList: [{
id: 1,
type: 'pie',
name: '饼状图'
}, {
id: 2,
type: 'bar1',
name: '柱状图(橫)'
}, {
id: 3,
type: 'line',
name: '折线图'
}, {
id: 4,
type: 'bar2',
name: '柱状图(竖)'
}, {
id: 5,
type: 'lineBar',
name: '柱状+折线'
}],
currentIndex: 0,
xList: [{
id: 1,
name: '轴1',
selected: false,
children: ['江干区1', '西湖区1', '拱墅区1', '余杭区1', '临安1']
}, {
id: 2,
name: '轴2',
selected: false,
children: ['江干区2', '西湖区2', '拱墅区2', '余杭区2', '临安2']
}, {
id: 3,
name: '轴3',
selected: false,
children: ['江干区3', '西湖区3', '拱墅区3', '余杭区3', '临安3']
}, {
id: 4,
name: '轴4',
selected: false,
children: ['江干区4', '西湖区4', '拱墅区4', '余杭区4', '临安4']
}],
yList: [{
id: 1,
name: '控件1',
selected: false,
seritesObj: {
name: '控件1',
data: [79, 254, 200, 334, 390, 320, 220],
dataPie: [{
value: 40,
name: '江干区'
}, {
value: 38,
name: '西湖区'
}, {
value: 32,
name: '拱墅区'
}, {
value: 30,
name: '余杭区'
}, {
value: 28,
name: '临安'
}]
}
}, {
id: 2,
name: '控件2',
selected: false,
seritesObj: {
name: '控件2',
data: [179, 52, 200, 334, 390, 330, 220],
dataPie: [{
value: 45,
name: '江干区'
}, {
value: 38,
name: '西湖区'
}, {
value: 32,
name: '拱墅区'
}, {
value: 30,
name: '余杭区'
}, {
value: 28,
name: '临安'
}]
}
}, {
id: 3,
name: '控件3',
selected: false,
seritesObj: {
name: '控件3',
data: [79, 452, 260, 334, 390, 350, 220],
dataPie: [{
value: 49,
name: '江干区'
}, {
value: 38,
name: '西湖区'
}, {
value: 32,
name: '拱墅区'
}, {
value: 30,
name: '余杭区'
}, {
value: 28,
name: '临安'
}]
}
}, {
id: 4,
name: '控件4',
selected: false,
seritesObj: {
name: '控件4',
data: [79, 52, 250, 334, 320, 330, 220],
dataPie: [{
value: 50,
name: '江干区'
}, {
value: 38,
name: '西湖区'
}, {
value: 32,
name: '拱墅区'
}, {
value: 30,
name: '余杭区'
}, {
value: 28,
name: '临安'
}]
}
}],
barList: [{
id: 1,
chartType: 'bar',
name: '控件1',
selected: false,
seritesObj: {
name: '控件1',
data: [79, 254, 200, 334, 390, 320, 220]
}
}, {
id: 2,
chartType: 'bar',
name: '控件2',
selected: false,
seritesObj: {
name: '控件2',
data: [179, 52, 200, 334, 390, 330, 220]
}
}, {
id: 3,
chartType: 'bar',
name: '控件3',
selected: false,
seritesObj: {
name: '控件3',
data: [79, 452, 260, 334, 390, 350, 220]
}
}, {
id: 4,
chartType: 'bar',
name: '控件4',
selected: false,
seritesObj: {
name: '控件4',
data: [79, 52, 250, 334, 320, 330, 220]
}
}],
lineList: [{
id: 1,
chartType: 'line',
name: '控件1',
selected: false,
seritesObj: {
name: '控件1',
data: [79, 254, 200, 334, 390, 320, 220]
}
}, {
id: 2,
chartType: 'line',
name: '控件2',
selected: false,
seritesObj: {
name: '控件2',
data: [179, 52, 200, 334, 390, 330, 220]
}
}, {
id: 3,
chartType: 'line',
name: '控件3',
selected: false,
seritesObj: {
name: '控件3',
data: [79, 452, 260, 334, 390, 350, 220]
}
}, {
id: 4,
chartType: 'line',
name: '控件4',
selected: false,
seritesObj: {
name: '控件4',
data: [79, 52, 250, 334, 320, 330, 220]
}
}],
showTwo: false,
currentType: 'pie',
chartData: {
xData: [],
series: [],
legend: [],
title: ''
},
chartTitle: '',
seritesObj: {},
seritesObjBar: {},
seritesObjLine: {}
};
},
watch: {
currentType: {
handler(newVal, oldVal) {
this.yList.map(item = > {
item.selected = false;
});
this.chartData.series = [];
this.chartData.legend = [];
this.seritesObj.name = '';
this.seritesObj.data = [];
switch (newVal) {
case 'pie':
this.showTwo = false;
break;
case 'line':
this.showTwo = false;
break;
case 'bar1':
this.showTwo = false;
break;
case 'bar2':
this.showTwo = false;
break;
case 'lineBar':
this.showTwo = true;
break;
}
}, deep: true,
immediate: true
}
},
methods: {
graphIcon(type) {
let img = '';
switch (type) {
case 'pie':
img = require('@/assets/image/icon_pie.png');
this.seritesObj = {
type: 'pie',
roseType: 'radius',
// radius: [15, 95],
center: ['50%', '50%'],
animationEasing: 'cubicInOut',
animationDuration: 2600
};
break;
case 'line':
img = require('@/assets/image/icon_line.png');
this.seritesObj = {
smooth: true,
type: 'line',
animationDuration: 2800,
animationEasing: 'cubicInOut'
};
break;
case 'bar1':
img = require('@/assets/image/icon_bar_horizontal.png');
this.seritesObj = {
type: 'bar',
stack: 'vistors',
barWidth: '60%'
};
break;
case 'bar2':
img = require('@/assets/image/icon_bar_vertical.png');
break;
case 'lineBar':
img = require('@/assets/image/icon_line.png');
this.seritesObj = {
type: 'bar',
stack: 'vistors',
barWidth: '60%'
};
break;
}
return img;
},
toggleSeletX(item) {
this.xList.map(it = > {
it.selected = false;
});
item.selected = true;
this.chartData.xData = item.children;
console.log(this.chartData.series, 'this.chartData.series');
if (this.currentType == 'pie') {}
if (this.chartData.series && this.chartData.series.length > 0) {
this.chartData.series[0].data.map((ite, index) = > {
item.children.map((it, i) = > {
if (index == i) {
ite.name = it;
}
});
});
}
},
toggleSelet(item) {
if (this.currentType == 'pie') {
this.yList.map(it = > {
it.selected = false;
});
item.selected = true;
} else {
item.selected = !item.selected;
}
switch (this.currentType) {
case 'pie':
this.seritesObj = {
type: 'pie',
roseType: 'radius',
// radius: [15, 95],
// center: ['50%', '50%'],
animationEasing: 'cubicInOut',
animationDuration: 2600
};
break;
case 'line':
this.seritesObj = {
smooth: true,
type: 'line',
animationDuration: 2800,
animationEasing: 'cubicInOut'
};
break;
case 'bar1':
this.seritesObj = {
type: 'bar',
stack: 'vistors',
barWidth: '60%'
};
break;
case 'bar2':
this.seritesObj = {
type: 'bar',
stack: 'vistors',
barWidth: '60%'
};
break;
case 'lineBar':
this.seritesObjBar = {
type: 'bar',
stack: 'vistors',
barWidth: '60%',
offset: 80
};
this.seritesObjLine = {
smooth: true,
type: 'line',
animationDuration: 2800,
animationEasing: 'cubicInOut'
};
break;
} this.seritesObj.name = item.name;
let $name_index = this.chartData.legend.indexOf(item.name);
let arr = [];
if (this.currentType == 'pie') {
// 饼图
this.chartData.xData.map((ite, index) = > {
item.seritesObj.dataPie.map((it, i) = > {
if (index == i) {
it.name = ite;
}
});
});
this.seritesObj.data = item.seritesObj.dataPie;
this.chartData.series = [];
this.chartData.series.push(this.seritesObj);
} else if (this.currentType == 'lineBar') {
// 柱状+折线
if (item.chartType == 'bar') {
this.seritesObjBar.name = item.name;
} else {
this.seritesObjLine.name = item.name;
}
if (item.selected) {
this.chartData.legend.push(item.name);
if (item.chartType == 'bar') {
this.seritesObjBar.data = item.seritesObj.data;
this.chartData.series.push(this.seritesObjBar);
} else {
this.seritesObjLine.data = item.seritesObj.data;
this.chartData.series.push(this.seritesObjLine);
}
} else {
this.chartData.legend.splice($name_index, 1);
console.log(this.chartData.series, 'this.chartData.series');
this.chartData.series.map((it, i) = > {
if (it.name == item.name) {
this.chartData.series.splice(i, 1);
}
});
}
// console.log(this.chartData.series, 'this.chartData.series');
} else {
this.seritesObj.data = item.seritesObj.data;
if (item.selected) {
this.chartData.legend.push(item.name);
this.chartData.series.push(this.seritesObj);
} else {
this.chartData.legend.splice($name_index, 1);
this.chartData.series.map((it, i) = > {
if (it.name == item.name) {
this.chartData.series.splice(i, 1);
}
});
}
}
this.chartData.legend = [...new Set(this.chartData.legend)];
},
handle_addPicture() {
switch (this.currentType) {
case 'pie':
this.$refs.pie.initChart();
break;
case 'line':
this.$refs.line.initChart();
break;
case 'bar1':
this.$refs.bar1.initChart();
break;
case 'bar2':
this.$refs.bar2.initChart();
break;
case 'lineBar':
this.$refs.lineBar.initChart();
break;
}
},
// 保存图片
saveImage() {
// 请求接口成功后返回列表页面
this.$message({
type: 'success',
message: '保存成功!'
});
this.$router.go(-1);
},
//下载图片
downloadFile() {
let aLink = document.createElement('a');
let blob = this.base64ToBlob();
let evt = document.createEvent('HTMLEvents');
evt.initEvent('click', true, true);
aLink.download = chartData.title ? chartData.title : '报表图形'; //下载图片的名称
aLink.href = URL.createObjectURL(blob);
aLink.click();
},
exportImg() {
//echart返回一个 base64 的 URL
let myChart = echarts.init(document.getElementsByClassName(this.currentType)[0]);
console.log(myChart, 'myChart');
return myChart.getDataURL({
type: 'png',
pixelRatio: 1,
backgroundColor: '#fff'
});
},
base64ToBlob() {
//将base64转换blob
let img = this.exportImg();
let parts = img.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: contentType
});
}
}
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';
.reportPicture {
width: 100%;
height: 100%;
padding: 12px 20px;
background-color: #f7f7f7;
.reportPicture_inner {
width: 100%;
height: 100%;
border-radius: 6px;
background-color: #fff;
// padding: 20px 15px;
& > header {
padding: 20px 16px;
display: flex;
align-items: center;
border-bottom: 1px solid #ececec;
& > span {
margin-right: 15px;
font-size: 14px;
}
& > ul {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
& > li {
padding: 0 12px;
min-width: 130px;
height: 38px;
border: 1px solid #e6e5e5;
background-color: #fff;
border-radius: 24px;
display: flex;
align-items: center;
margin-right: 10px;
cursor: pointer;
&.highLight {
border: 1px solid $themeColor;
}
img {
width: 20px;
margin-right: 10px;
}
span {
font-size: 14px;
}
}
}
}
& > main {
padding: 20px;
height: 80%;
display: flex;
.text {
font-size: 14px;
margin-right: 10px;
}
& > aside,
& > main {
background-color: #fff;
}
& > aside {
width: 20%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #fff;
margin: 0;
margin-right: 10px;
padding: 0 12px;
/deep/ .el-tabs {
display: flex;
flex-direction: column;
height: 100%;
.el-tabs__content {
flex: 1;
height: 100%;
.el-tab-pane {
height: 100%;
}
}
.el-tabs__item {
&.is-active,
&:hover {
color: $themeColor !important;
}
}
.el-tabs__active-bar {
background-color: $themeColor;
}
}
.tab_item {
height: 100%;
}
section {
display: flex;
margin-bottom: 20px;
height: 47%;
& > span {
font-size: 14px;
}
}
ul {
flex: 1;
height: 100%;
list-style: none;
padding: 0;
margin: 0;
border-radius: 4px;
border: solid 1px #e6e5e5;
/deep/.el-scrollbar__wrap {
overflow-x: hidden;
}
li {
line-height: 30px;
color: #333;
font-size: 14px;
padding-left: 10px;
border-radius: 3px;
margin-bottom: 4px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.highLight {
background-color: $themeColor;
color: #fff;
}
}
}
& > footer {
height: 5%;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
}
}
& > main {
flex: 1;
display: flex;
flex-direction: column;
border: solid 1px #e6e5e5;
border-radius: 4px;
& > header {
height: 42px;
background-color: #f9f9f9;
display: flex;
align-items: center;
padding-left: 10px;
.input_box {
width: 400px;
}
}
.chart_box {
flex: 1;
padding: 20px;
#chart {
width: 100%;
height: 100%;
}
}
}
}
}
}
</style>
子组件：
<template>
<div :class="className" :style="{height:height,width:width}" />
</template> <script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from './mixins/resize'; const animationDuration = 6000; export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
chartData: {
type: Object
}
},
data() {
return {
chart: null
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el);
this.chart.clear();
this.setOptions(this.chartData);
},
setOptions({ xData, series, legend, title } = {}) {
this.chart.setOption({
title: {
text: title
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
// top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
legend: {
data: legend
},
xAxis: [
{
type: 'category',
data: xData,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value',
axisTick: {
show: false
}
}
],
series: series
});
}
}
};
</script>
动态配置生成echarts图表的更多相关文章
- node后台生成echarts图表
1 //2,生成图片数据 2 var option = { 3 tooltip: { 4 trigger: 'item', 5 formatter: "{a} <br/>{b} ...
- 前端引擎初步设计稿 -通过配置生成动态页面 ，LandaSugar平台 .NET-C#-MVC
公司准备开发出一款项目开发平台 LandaSugar,分为 前端引擎.工作引擎.数据引擎 三大块,开发人员只需要对三大模块进行相应的配置便能够完成一个定制项目的开发. 听起来貌似是异想天开,但是是否真 ...
- echarts生成的图表大小怎么随屏幕的大小改变自适应
最近在做图表,记录一下用到的知识点,当做自己的日记吧,会不断添加新内容 1,echarts生成的图表大小怎么随屏幕的大小改变自适应? this.chart.setOption(this.options ...
- Echarts图表常用功能配置，Demo示例
先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...
- mui在tab选项卡中echarts图表不能动态随页面变化大小 只能固定大小
在mui tab选项卡中一直都不能让echarts动态变化大小 只能固定大小来展示图表,网上说的window.onresize = mycharts.resize;方法根本就没有效果,后面在https ...
- 使用java代码动态配置与xml文件结合的方式使用mybatis-generator生成代码配置
1.使用java代码动态配置与xml文件结合的方式使用mybatis-generator生成代码配置 2.上代码:在resources目录下新建:generatorConfiguration.xml文 ...
- ECharts图表——封装通用配置
前言 前段时间在做大屏项目,大量用到echarts图表,大屏对设计规范要求比较高,而大屏项目,经常会因为业务方面的原因.或者是数据方面的原因改动UI设计,所有图表的代码也是三天一小改.五天一大改 因此 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ASP.NET MVC + ECharts图表案例
废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...
- vue-cli ——解决多次复用含有Echarts图表组件的问题
在vue项目里,组件复用是一件很开心的事,可以节省很多时间去排版,达到事半功倍效果,但是昨晚在vue-cli项目里组件复用时发现基于Echarts图表的组件不能够复用,昨晚捯饬了很久,终于还是解决了这 ...
随机推荐
- Dell存储备份告警：
创建时间 修改日期 对象名称 消息 类型 告警状态 已确认 告警定义 类型 23-3-12 11:59:26 23-3-12 11:59:37 copyMirrorswap 2 CMs Operati ...
- div中多行内容垂直居中显示
div中多行内容垂直居中显示 一.css 样式 .wrap { height: 200px; width: 200px; border: 1px solid #232323; display: fle ...
- chainLink vrf实验
目标 用vrf写一个随机红包 数据结构 红包: struct Envelope { Type t; // 类型,只是erc20 和eth红包 ERC20 token; // erc20 ,如果是erc ...
- C#/.NET/.NET Core技术前沿周刊 | 第 5 期（2024年9.9-9.15）
前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...
- excel江湖异闻录--华麒麟
认识他应该是在18.19年左右,那时就感觉这也是个高手,同大部分的高手一样,痴迷函数,热衷创造.挑战不规范的数据. 后来他消失了好长一段时间,群里的同学都以为他退圈了,偶有少数的同学想起他,言语都带着 ...
- Java日期时间API系列22-----Jdk8中java.time包中的新的日期时间API类，Month月份和DayOfWeek星期的计算。
Java8中为月份和星期新增的了,Month和DayOfWeek,来处理月份和星期的特殊问题,这2个类都是枚举类,对Month.DayOfWeek源码说明和简单应用,月份英文,月份英文简称,月份中文, ...
- watch 监视搜索关键词的变化不断发送请求返回建议
watch: { keywords: { // yarn add lodash 下载lodash包 // import { debounce } from "lodash"; 引入 ...
- 盘点.NET支持的 处理器架构
在一个会议上,中国招投标协会的技术负责人居然当着很多领导的面说.NET不能在国产服务器上运行,可以说这个技术负责人非蠢即坏.国产服务器的处理器架构主要包括x86.ARM.LoongArch.risc- ...
- 使用 GPU-Operator 与 KubeSphere 简化深度学习训练与 GPU 监控
本文将从 GPU-Operator 概念介绍.安装部署.深度训练测试应用部署,以及在 KubeSphere 使用自定义监控面板对接 GPU 监控,从原理到实践,逐步浅析介绍与实践 GPU-Operat ...
- PBA 商业分析师 考试心得
2021年7月报名开始学习PBA,因为疫情,中间经历两次考试延期,虽然复习时间增多了,但是学习的节奏也被打乱.好在没有白努力,今天收到了邮件,5A通过考试.在这里整理学习经验,梳理一下自己的思路,也希 ...