123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- <template>
- <div shadow="never" class="homeBoxCard" v-loading="loading">
- <div :style="'height:' + Height" id="worksChartRef" ref="worksChartRef" />
- </div>
- </template>
- <script>
- import { computed, defineComponent, onMounted, ref ,watch} from 'vue'
- import { useStore } from 'vuex'
- import * as echarts from 'echarts'
- // import { ChartDataType } from "../../data";
- export default defineComponent({
- name: 'CurveCom',
- props: {
- Height: String,
- echartsData:Object
- },
- setup(props) {
- const store = useStore()
- // 总数
- const total = computed(() => store.state.Home.worksChartData.total)
- // num
- const num = computed(() => store.state.Home.worksChartData.num)
- // 读取数据 func
- const loading = ref(true)
- const getData = async () => {
- console.log(props.echartsData.name)
- loading.value = false
- }
- function echarts2(){
- let myChart = echarts.init(document.getElementById('worksChartRef'))
- // 绘制图表
- myChart.setOption({
- tooltip: {
- trigger: 'axis',
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '5%',
- containLabel: true,
- },
- legend: {
- data: ['(kw)'],
- bottom: '5',
- },
- toolbox: {
- show: true,
- feature: {
- // dataView: { show: true, readOnly: false },
- // magicType: { show: true, type: ["line", "bar"] },
- // restore: { show: true },
- saveAsImage: { show: true, color: 'black' , title:'',name:'图表下载'},
- },
- iconStyle: {
- borderColor: '#666',
- },
- },
- xAxis: [
- {
- type: 'category',
- data:props.echartsData.listDate,
- boundaryGap: true,
- axisTick: {
- show: false, //去除刻度线
- },
- axisLabel: {
- color: 'black', // 文本颜色
- },
- axisLine: {
- show: true, // 去除轴线
- },
- },
- ],
- yAxis: [
- {
- name: 'kw',
- type: 'value',
- nameTextStyle: {
- color: 'black',
- fontSize: 10,
- },
- axisTick: {
- show: true, //去除刻度线
- },
- axisLabel: {
- color: 'black', // 文本颜色
- },
- axisLine: {
- show: true, // 去除轴线
- lineStyle: {
- color: 'black',
- },
- },
- splitNumber: 5,
- splitLine: {
- show: false,
- lineStyle: {
- color: '#9d9d9d',
- },
- },
- },
- ],
- series: [
- {
- name: '(kw)',
- type: 'bar',
- data:props.echartsData.list,
- markPoint: {
- data: [
- { type: 'max', name: 'Max' },
- // { type: "min", name: "Min" },
- ],
- },
- },
- ],
- })
- window.addEventListener('resize', () => {
- myChart.resize()
- })
- }
- const writeValue = (val) => {
- val
- echarts2()
- getData()
- }
- //监听变化
- watch(
- () => props.echartsData,
- (newVal, oldVal, clear) => {
- // 执行异步任务,并得到关闭异步任务的 id
- // alert(1)
- console.log(newVal)
- let id = writeValue(newVal, oldVal)
- // 如果 watch 监听被重复执行了,则会先清除上次未完成的异步任务
- clear(() => clearTimeout(id))
- },
- { lazy: true }
- )
- onMounted(() => {
- getData()
- echarts2()
-
- })
- return {
- loading,
- total,
- num,
- echarts2
- }
- },
- })
- </script>
- <style lang="scss" scoped>
- .homeBoxCard {
- // margin-bottom: 24px;
- ::v-deep(.el-card__header) {
- padding-left: 12px;
- padding-right: 12px;
- }
- ::v-deep(.el-card__body) {
- padding: 12px;
- font-size: 14px;
- line-height: 1.5715;
- }
- ::v-deep(.el-divider) {
- margin: 8px 0;
- }
- .num {
- font-size: 30px;
- color: #515a6e;
- }
- }
- </style>
|