237 lines
8.1 KiB
JavaScript
237 lines
8.1 KiB
JavaScript
|
|
Vue.component("material-many-bar-chart", {
|
|
template: `
|
|
<div :style="{'height': height+'px'}" ref="chart"> </div>
|
|
`,
|
|
props: {
|
|
data:{
|
|
type:Object
|
|
},
|
|
yaxis:{
|
|
type:Boolean
|
|
},
|
|
height:{
|
|
type:Number
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
option:{},
|
|
}
|
|
},
|
|
created(){
|
|
|
|
},
|
|
mounted() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.getChartData()
|
|
},
|
|
//分类及工时情况
|
|
getChartData(){
|
|
// console.log(this.data)
|
|
// console.log(this.yaxis)
|
|
|
|
var chChartBar = echarts.init(this.$refs.chart);
|
|
this.$nextTick(() => {
|
|
this.echartBar(chChartBar,this.data,this.yaxis)
|
|
})
|
|
},
|
|
echartBar(myChart,data,state){
|
|
var that = this
|
|
let newPromise = new Promise((resolve) => {
|
|
resolve()
|
|
})
|
|
//然后异步执行echarts的初始化函数
|
|
newPromise.then(() => {
|
|
var unit = ''
|
|
if(data.unit){
|
|
unit = '单位：'+ data.unit
|
|
}
|
|
|
|
var yAxis= []
|
|
var grid = ''
|
|
if(state == true){
|
|
yAxis.push(
|
|
{
|
|
name:unit,
|
|
nameTextStyle: { //Y轴那么的样式
|
|
color: '#42d0ff',
|
|
fontSize: 14,
|
|
},
|
|
max:data.max,
|
|
type: "value",
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#cbdaff",
|
|
},
|
|
formatter: "{value}",
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#2f4472",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#2f4472",
|
|
},
|
|
},
|
|
}
|
|
)
|
|
grid = {
|
|
left: "15%",
|
|
top: "20%",
|
|
right: "0%",
|
|
bottom: "10%",
|
|
}
|
|
}else{
|
|
yAxis.push(
|
|
{
|
|
nameTextStyle: { //Y轴那么的样式
|
|
color: '#42d0ff',
|
|
fontSize: 14,
|
|
},
|
|
max:data.max,
|
|
type: "value",
|
|
axisLabel: {show: false},
|
|
axisTick: {show: false},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#2f4472",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#2f4472",
|
|
},
|
|
},
|
|
}
|
|
)
|
|
grid = {
|
|
left: "0%",
|
|
top: "30%",
|
|
right: "0%",
|
|
bottom: "10%",
|
|
}
|
|
}
|
|
this.option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
label: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
grid: grid,
|
|
xAxis: {
|
|
data: data.xData,
|
|
axisLine: {
|
|
show: true, //隐藏X轴轴线
|
|
lineStyle: {
|
|
color: "#2f4472",
|
|
width: 1,
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: true, //隐藏X轴刻度
|
|
alignWithLabel: true,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#cbdaff", //X轴文字颜色
|
|
fontSize: 14,
|
|
},
|
|
interval: 0,
|
|
|
|
},
|
|
},
|
|
yAxis: yAxis,
|
|
series: [
|
|
{
|
|
name: data.legend[0],
|
|
type: "bar",
|
|
barWidth: 10,
|
|
barGap: 2,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "top",
|
|
color:"#fff"
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "rgba(64,124,254,1)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(64,124,254,0.2)",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: data.yData_1,
|
|
},
|
|
{
|
|
name: data.legend[1],
|
|
type: "bar",
|
|
barWidth: 10,
|
|
barGap: 2,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "inside",
|
|
color:"#fff"
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "rgba(25,210,204,1)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(25,210,204,0.2)",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: data.yData_2,
|
|
},
|
|
|
|
],
|
|
};
|
|
|
|
myChart.setOption(this.option);
|
|
window.onresize = myChart.resize;
|
|
|
|
/*myChart.off('click')
|
|
|
|
myChart.on('click', function (params) {
|
|
that.$emit('chart',params.name);
|
|
})*/
|
|
})
|
|
},
|
|
},
|
|
watch:{
|
|
data:function () {
|
|
this.init()
|
|
}
|
|
}
|
|
})
|