monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit d6249153236bd28bd3ee5ed796719beaf903c3d2 1 parent 32c24db9

echarts

Inline Side-by-side
Showing 8 changed files with 599 additions and 0 deletions
<div :id="id" :style="{'width':width,'height':height}">
</div>
... ...
/**
* https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
* <p>
* 作者： Wang
* 时间：2021/12/3 14:30
*/
export default {
name: 'echarts-line',
template: '',
components: {},
props: {
// 单位px
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
title: {
type: Object,
default: {
show: false,
text: '标题',
subtext: '辅助标题',
left: 'center'
}
},
sourceData: {
type: Array,
default: [
['product', '2015', '2016', '2017'],
['示例1', 43.3, 85.8, 93.7],
['示例2', 83.1, 73.4, 55.1],
['示例3', 86.4, 65.2, 82.5],
['示例4', 72.4, 53.9, 39.1]
]
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let id = "line" + (new Date()).getTime();
let getOption = () => {
let sourceData = props.sourceData;
let arr = [];
for (let i = 0; i < sourceData[0].length; i++) {
arr.push({type: 'bar'})
}
let option = {
legend: {
right:'20px',
itemWidth:25,
itemHeight:5,
textStyle: {
color: '#fff',
fontSize: 7
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
textStyle: {
color: '#fff',
align: 'left'
}
},
dataset: {
source: props.sourceData
},
grid: {
top: '30px',
left: '10px',
right: '10px',
bottom: '10px',
containLabel: true
},
xAxis: {type: 'category'},
yAxis: {
axisLabel: {
formatter: '{value}',//以百分比显示
color:'#ffffff',
},
splitLine:{
lineStyle: {
type: 'dashed',
color:'#313c5e'
}
},
axisLine:{
type:'do',
show:true,//是否显示坐标线
lineStyle: {
color:'#21bad6'
}
},
},
series: arr
};
let line = echarts.init(document.getElementById(id));
setTimeout(function () {
line.clear();
line.setOption(option);
}, 200);
}
// 挂载完
Vue.onMounted(() => {
getOption();
})
return {
id
}
}
}
... ...
<div :id="id" :style="{'width':width,'height':height}">
</div>
... ...
/**
* https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
* <p>
* 作者： Wang
* 时间：2021/12/3 14:30
*/
export default {
name: 'barStack',
template: '',
components: {},
props: {
// 单位px
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
title: {
type: Object,
default: {
show: false,
text: '标题',
subtext: '辅助标题',
left: 'center'
}
},
sourceData: {
type: Array,
default: [
['product', '2015', '2016', '2017'],
['示例1', 43.3, 85.8, 93.7],
['示例2', 83.1, 73.4, 55.1],
['示例3', 86.4, 65.2, 82.5],
['示例4', 72.4, 53.9, 39.1]
]
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let id = "line" + (new Date()).getTime();
let getOption = () => {
let sourceData = props.sourceData;
let arr = [];
for (let i = 1; i < sourceData[0].length; i++) {
let nameItem = sourceData[0][i];
let name = nameItem;
if(nameItem && nameItem.name){
name = nameItem.name;
}
arr.push({
name: name,
type: 'bar',
stack: 'total',
label: {
show: false
},
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: nameItem.color,
lineStyle: {
color: nameItem.color,
width: 1
}
}
},
})
}
let option = {
legend: {
itemWidth: 25,
itemHeight: 2,
textStyle: {
color: '#fff',
fontSize: "12px"
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
textStyle: {
color: '#fff',
align: 'left'
}
},
dataset: {
source: props.sourceData
},
grid: {
top: '30px',
left: '10px',
right: '10px',
bottom: '10px',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
lineStyle: {
type: 'dashed',
color: '#313c5e'
}
},
axisLine: {
type: 'do',
show: true,//是否显示坐标线
lineStyle: {
color: '#21bad6'
}
},
axisLabel: {
color: '#ffffff',
fontSize: 10,
formatter: function (params) {
var newParamsName = '';
let paramsNameNumber = params.length;
let provideNumber = 3;
let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let i = 0; i < rowNumber; i++) {
let tempStr = '';
let start = i * provideNumber;
let end = start + provideNumber;
if (i == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
},
textStyle: {
rich: {
white: {
padding: [1, 0, 0, 0]
}
}
}
},
},
yAxis: {
axisLabel: {
formatter: '{value}',//以百分比显示
color: '#ffffff',
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#313c5e'
}
},
axisLine: {
type: 'do',
show: true,//是否显示坐标线
lineStyle: {
color: '#21bad6'
}
},
},
series: arr
};
let line = echarts.init(document.getElementById(id));
setTimeout(function () {
line.clear();
line.setOption(option);
}, 200);
}
// 挂载完
Vue.onMounted(() => {
getOption();
})
return {
id
}
}
}
... ...
<div :id="id" :style="{'width':width,'height':height}">
</div>
... ...
/**
* https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
* <p>
* 作者： Wang
* 时间：2021/12/3 14:30
*/
export default {
name: 'echarts-line',
template: '',
components: {},
props: {
// 单位px
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
title: {
type: Object,
default: {
show: false,
text: '标题',
subtext: '辅助标题',
left: 'center'
}
},
sourceData: {
type: Array,
default: ['年报', '月报', '周报', '日报']
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let id = "line" + (new Date()).getTime();
let getOption = () => {
let size = 100 / props.sourceData.length;
let seriesData = props.sourceData.map(function (v, i) {
return {value: (i + 1) * size, name: v};
})
let option = {
title: {
text: 'Funnel Compare',
subtext: 'Fake Data',
left: 'left',
top: 'bottom',
show: false
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c}%'
},
toolbox: {},
legend: {
show: false,
orient: 'vertical',
left: 'left',
data: props.sourceData
},
series: [
{
name: '',
type: 'funnel',
left: '10',
top: 20,
bottom: 20,
width: '80%',
min: 100,
max: 0,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
width: 100,
position: ''
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: seriesData
}
]
};
let line = echarts.init(document.getElementById(id));
setTimeout(function () {
line.clear();
line.setOption(option);
}, 200);
}
// 挂载完
Vue.onMounted(() => {
getOption();
})
return {
id
}
}
}
... ...
<div :id="id" :style="{'width':width,'height':height}">
</div>
... ...
/**
* https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
* <p>
* 作者： Wang
* 时间：2021/12/3 14:30
*/
export default {
name: 'echarts-pie',
template: '',
components: {},
props: {
// 单位px
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
title: {
type: Object,
default: {
show: false,
text: '标题',
subtext: '辅助标题',
left: 'center'
}
},
// 列表
pieType: {
type: String,
default: ''
},
seriesData: {
type: Array,
default: [{
name: '',
data: [
{value: 1048, name: '示例1'},
{value: 735, name: '示例2'},
{value: 580, name: '示例3'},
{value: 484, name: '示例4'},
{value: 300, name: '示例5'}
]
}
]
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let id = "pie" + (new Date()).getTime();
let pieClick = (param) => {
emit('pieClick', param, props.pieType);
}
let getOption = () => {
let series = props.seriesData.map(function (v) {
return {
name: v.name,
type: 'pie',
radius: '80%',
data: v.data,
center: ['30%', '50%'],
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
})
let option = {
title: props.title,
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
textStyle: {
color: '#fff',
align: 'left'
}
},
legend: {
orient: 'vertical',
left: 'right',
y: 'bottom',
itemWidth: 25,
itemHeight: 5,
textStyle: {
color: '#fff',
fontSize: 10
}
},
series: series
};
let pie = echarts.init(document.getElementById(id));
setTimeout(function () {
pie.clear();
pie.setOption(option);
pie.on("click", pieClick);
}, 200);
}
// 挂载完
Vue.onMounted(() => {
getOption();
})
return {
id
}
}
}
... ...