Vue中使⽤echarts实现动态配置参数及类型显⽰不同形状的图表配置、可视化的echar。。。
效果
我封装的⼀个组件折线图，都可以多维度展⽰，
HTML
<div :class="'echarts-type ' + (currentVisible ? 'visible' : 'hidden')" >
<div class="echarts-type-left" :>
<div class="echarts-expand" v-show="expandFlag">
<div class="fexpand">
<div class="rowa-title" @click="expandBtn2">
<span>选择项</span>
<span> <i class="uex-icon-arrow-left"></i></span>
</div>
<div class="rowa-content">
<el-form ref="elForm" :model="echartsForm" :rules="echartsRules" class="echarts-form">
<el-form-item label="选择图形" prop="type">
<el-select v-model="pe" @change="handelEechartsType('type',pe)">
<el-option v-for="option in echartsTypes" :key="option" :label="option.label" :value="pe" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="X轴值" prop="xAxis">
<el-select v-model="echartsForm.xAxis" @change="handelEecharts('xAxis',echartsForm.xAxis)">
<el-option v-for="option in tableHeadeData" :key="option" :label="option.label" :value="pe" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="Y轴值" prop="yAxis">
<el-select v-model="echartsForm.yAxis" @change="handelEecharts('yAxis',echartsForm.yAxis)">
<el-option v-for="option in tableHeadeData" :key="option" :label="option.label" :value="pe" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="维度" prop="dimension">
<el-select v-model="echartsForm.dimension" @change="handelEecharts('dimension',echartsForm.dimension)">
<el-option label="清空维度" value="resetdimension"></el-option>
<el-option v-for="option in tableHeadeData" :key="option" :label="option.label" :value="pe" >
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Y轴最⼩值" prop="yMin" v-show="pe=='line'">
<el-input-number class="input-number" size="small" v-model="echartsForm.yMin" @change="handelYMin(echartsForm.yMin)" @blur="handelYMin(echartsForm.yMin)"></el-input-number>
</el-form-item>
<el-form-item label="Y轴最⼤值" prop="XMax" v-show="pe=='line'">
<el-input-number class="input-number" size="small" v-model="echartsForm.XMax" @change="handelXMax(echartsForm.XMax)" @blur="handelXMax(echartsForm.XMax)"></el-input-number> </el-form-item>
</el-form>
</div>
<div class="rowa-footer">
<el-button type="text" class="reset" @click="resetForm('elForm')">重置</el-button>
<#-- <el-button type="text" class="reset" @click="handel">清空维度</el-button>-->
<#-- <el-button type="text" class="submit" @click="submitForm('elForm')">提交</el-button>-->
</div>
</div>
</div>
<div v-show="!expandFlag" class="fshrink" @click="expandBtn">
<i class="uex-icon-arrow-right"></i>
<span>筛选</span>
</div>
</div>
<div class="echarts-type-right" :>
<#--后期过多可写成循环-->
<#--折线图-->
<div class="x-axis-tip"></div>
<div class="statistics-line" v-show="pe=='line'" :key="tabItem.id">
<div :id="'dataLineGraph'+tabItem.id" ></div>
</div>
<#--柱形图-->
<div class=" statistics-line statistics-bar" v-show="pe=='bar'" :key="tabItem.id">
<div :id="'dataBarGraph'+tabItem.id" ></div>
</div>
<#--折线图-->
<div class="statistics-line statistics-scatter" v-show="pe=='scatter'" :key="tabItem.id"> <div :id="'dataScatterGraph'+tabItem.id" ></div>
</div>
</div>
</div>
js 我这⾥通过js 注⼊进来的组件，可以根据需要注⼊组件
'use strict';
var dataLineGraph;
var dataBarGraph;
var dataScatterGraph;
Vueponent('echarts-type', {
template:"#echarts-type-template",
props: {
value: String,
visible: {
type: Boolean,
default: false
},
tab:{
type: Object,
default: function() {
return {};
}
},
show: Boolean,
sqlData: {
type: Object,
default: function() {
return {};
}
},
echartsTabelData: {
type: Array,
default: function() {
return [];
}
},
echartsTabelHeader: {
type: Array,
default: function() {
return [];
}
},
rules: {
type: Object,
default: function() {
return {};
}
},
},
data: function() {
return {
currentVisible: this.visible,// 控制是否显⽰可视化图标
leftWidth:180,
tabItem:this.tab,//tab的信息
expandFlag:true,
isDimension:false,
hartsTabelData,//表格数据
hartsTabelHeader,//表格头部数据
echartstype:null,
echartsForm: {
type:'',
dimension:'',
xAxis:'',
yAxis:'',
yMin:'',
XMax:'',
},
echartsRules:{
type: [
{ required: true, message: '请选择图形', trigger: 'change' }
],
xAxis: [
{ required: true, message: '请选择X轴值', trigger: 'change' }
],
yAxis: [
{ required: true, message: '请选择Y轴值', trigger: 'change' }
],
},
echartsTypes:[
{
type:'line',
label:'折线图'
},
{
type:'bar',
label:'柱形图'
},
{
type:'scatter',
label:'散点图'
}
],
graphTypeData:{legendData:[],yAxisData:[],xAxisData:[],seriesData:[],min:0, max:2000},
xData:[],
yData:[],
xAxisData:[],
yAxisData:[],
seriesData:[],
type:'value',
};
},
computed: {
},
methods: {
resetForm:function(formName){
var self=this;
this.$refs[formName].resetFields();
dataBarGraph.clear();
},
submitForm:function(){
var self=this;
self.pe);//调⽤对应的图形
},
expandBtn2:function(){
var self=this;
self.leftWidth = 30;
self.$nextTick(function () {
})
},
expandBtn:function(){
var self=this;
self.leftWidth = 180;
self.$nextTick(function () {
})
},
highLightText:function(){
var self=this;
setTimeout(function(){
var val = self.filterText;
if(val !== null && val !== ''){
var arr = $('.tree-line .el-tree-node .is-focusable .el-tree-node__content span:nth-child(2)'); for(var i=0;i<arr.length;i++){
var values = $(arr[i]).html();
var reg=new RegExp(val,"g"); //创建正则RegExp对象
$(arr[i]).place(reg,'<span >' + val + '</span>'));
}
}
},100);
},
filterNode:function(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
//统计图公共配置
publiconfigureOption:function(graphData,titleText){
var self=this;
var publiconfigure={
title: {
text: titleText,
textStyle:{
fontSize:12,
color: '#202D40',
}
},
color:['#13CE66','#F7BA2A','#FF4949','#8cbbf9','#f07c7c','#20A0FF'],
tooltip: {
trigger: 'axis',
confine: true,
extraCssText: 'white-space: normal; word-break: break-all;z-index:10'
},
toolbox: {
itemSize:12,
right :'20',
top:'-10',
feature: {
saveAsImage: {}
}
},
grid: {
left: '10%',
right: '8%',
bottom: '10%',
containLabel: true
},
dataZoom:self.dataZoomItem(graphData),
yAxis:self.yAxisItem(graphData),
};
return publiconfigure;
},
functionNotDimensionOption:function(graphData,graphDataType){
var self=this;
var isBoundaryGap = graphDataType == 'bar' ? true : false;
var axisLabelInterval = graphDataType == 'bar' ? 0 : 5;
var notDimensionOption = {
xAxis: [
{
type: 'category',
triggerEvent: true,
splitLine: {
show: true, //是否显⽰⽹格
lineStyle: {
color: '#dde1e8',
width: 1,
type: 'solid'
}
},
axisLabel : {//坐标颜⾊
interval:axisLabelInterval,
rotate: 30,
textStyle:{
color:"#606C80"
},
// formatter: function(params) {
// if(params){
// var res=params?params:[];
// if(res.length > 5) {
// res = res.substring(0, 5) + "..";
/
/ }
// return res;
// }else {
// return'';
// }
//
// }
},
axisLine:{//坐标刻度颜⾊
lineStyle:{
color:'#dde1e8',
}
},
axisTick:{//坐标朝向及颜⾊
inside: true,
lineStyle:{color:'#dde1e8'}, // x轴刻度的颜⾊
},
boundaryGap: isBoundaryGap,
data: graphData.xAxisData
}
],
series:self.functionNodname(graphData,graphDataType)//引⼊⽅法创建折线 };
return notDimensionOption;
},
functionDimensionOption:function(graphData,graphDataType){
var self=this;
var isBoundaryGap = graphDataType == 'bar' ? true : false;
var axisLabelInterval = graphDataType == 'bar' ? 0 : 5;
var dimensionOption = {
legend: {
type: 'scroll',
pageIconSize: 12, //翻页按钮⼤⼩
right:30,
left:30,
top:"5%",//与上⽅的距离可百分⽐% 可像素px
bottom:"5%",//与上⽅的距离可百分⽐% 可像素px
itemWidth: 15,
itemHeight: 10,
itemGap: 10,
textStyle: { //图例⽂字的样式
color: '#606C80',
fontSize: 12
},
data: graphData.legendData,
},
xAxis: [
{
type: 'category',
splitLine: {
show: true, //是否显⽰⽹格
lineStyle: {
color: '#dde1e8',
width: 1,
type: 'solid'
}
},
axisLabel : {//坐标颜⾊
interval:axisLabelInterval,
rotate: 30,
textStyle: {
color: "#606C80"
},
// formatter: function (params) {
// if(params){
// var res=params?params:[];
// if(res.length > 5) {
/
/ res = res.substring(0, 5) + "..";
// }
// return res;
// }else {
// return'';
// }
// }
},
axisLine:{//坐标刻度颜⾊
lineStyle:{
color:'#dde1e8',
}
},
axisTick:{//坐标朝向及颜⾊
inside: true,
lineStyle:{color:'#dde1e8'}, // x轴刻度的颜⾊
},
boundaryGap:isBoundaryGap,
// data: graphData.xAxisData
}
],
series: self.functionNodname(graphData,graphDataType)//引⼊⽅法创建折线
};
return dimensionOption;
},
dataZoomItem:function(graphData){
var self=this;
if(graphData.yAxisData && graphData.yAxisData.length > 20 && pe == 'category'){ return [
{
type: 'slider',
xAxisIndex: 0,//X轴
start:0,
end:50,
},
{
type: 'slider',
show:true,
yAxisIndex: 0,//Y轴
},
]
}else{
return [
{
type: 'slider',
xAxisIndex: 0,//X轴
start:0,
end:50,
},
{
type: 'slider',
show:false,
yAxisIndex: 0,//Y轴
},
]
}
改变button按钮的形状
},
yAxisItem:function(graphData){
var self=this;
hartsForm.dimension && hartsForm.dimension!='resetdimension') {//有维度 pe == 'value'){
return [
{
type: 'value',
splitLine: {
show: true, //是否显⽰⽹格
lineStyle: {
color: '#dde1e8',
width: 1,
type: 'solid'
}
},
axisTick:{//坐标朝向及颜⾊
inside: true,
lineStyle:{color:'#dde1e8'}, // x轴刻度的颜⾊
},
// data: graphData.yAxisData,
min: graphData.min||0,
max: self.yAxisDataMax(graphData),
axisLine:{
lineStyle:{
color: '#dde1e8',
}
},
axisLabel : {
textStyle:{
color:"#606C80"
},
},
},
]
}else {
return {
type: 'category',
triggerEvent: true,
splitLine: {
show: true, //是否显⽰⽹格
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论