75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<template>
|
|
<div id="bar-chart">
|
|
<div class="rose-chart-title" :style="'font-size:'+$fontSize(0.25)+'px'">ECharts 全局字体自适应</div>
|
|
<!-- <dv-charts :option="option" /> -->
|
|
<div id="bar-chart-container" ></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: 'barChart',
|
|
data () {
|
|
return {
|
|
option: {}
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
createData () {
|
|
var myChart = echarts.init(document.getElementById('bar-chart-container'));
|
|
this.option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: [120, 200, 150, 80, 70, 110, 130],
|
|
type: 'bar'
|
|
}
|
|
],
|
|
color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
|
|
}
|
|
myChart.setOption(this.option);
|
|
},
|
|
},
|
|
mounted () {
|
|
const { createData } = this
|
|
|
|
createData()
|
|
|
|
setInterval(createData, 30000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
#bar-chart {
|
|
width: 100%;
|
|
height: 50%;
|
|
background-color: rgba(6, 30, 93, 0.5);
|
|
border-top: 2px solid rgba(1, 153, 209, .5);
|
|
box-sizing: border-box;
|
|
|
|
.rose-chart-title {
|
|
height: 50px;
|
|
padding-top: 10px;
|
|
font-weight: bold;
|
|
text-indent: 20px;
|
|
// font-size: 20px;
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#bar-chart-container {
|
|
height: calc(~"100% - 50px");
|
|
}
|
|
}
|
|
</style>
|
|
|