可视化大屏进行总结

ৡ冥翊࿐

于 2024-04-01 18:49:12 发布

阅读量271

点赞数 10

分类专栏： vue java 文章标签： java

本文链接：https://blog.csdn.net/qq_45571306/article/details/137243107

版权

java 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

本文介绍了dataV和ECharts这两种在大屏幕背景和具体图表展示中常用的IT工具，包括安装、配置步骤以及使用示例，如如何在Vue中集成和创建性能图表。

摘要由CSDN通过智能技术生成

1、使用的到的工具

echarts Apache ECharts
dataV 介绍 | DataV

2、工具的介绍

1、dataV 用于大屏幕的背景边框

使用教程

1、安装

npm install @jiaminghi/data-view

2、配置


// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

//按需引入示例如下
import { borderBox1 } from '@jiaminghi/data-view'

Vue.use(borderBox1)

3、使用

<dv-border-box-1>dv-border-box-1</dv-border-box-1>

2、echarts 用于具体的图表

使用教程

1、安装

npm install echarts --save

2、配置

import * as echarts from 'echarts';

3、使用根据自己需要的echat进行选择

  <div id="left1" style="width: 250px;height: 200%;margin:0 0 0 20px">

import * as echarts from 'echarts';
var map, chart1;

        initChart1() {
            chart1 = echarts.init(document.getElementById('left1'));

            var option = {
                //下面是按钮文字颜色
                legend: {
                    bottom: "2%",
                    textStyle: {
                        color: "yellow"
                    },
                },
                tooltip: {},
                title: {
                    text: '各年级不同学年绩效实际情况',
                    x: 'center',
                    textStyle: {//标题颜色
                        color: "lightblue",
                        fontSize: 13,
                    }
                },
                dataset: {
                    source: [
                        ['product', '高一', '高二', '高三'],
                        ['2022\n上学年', 80.3, 80.8, 80.7],
                        ['2022\n下学年', 78.4, 86.1, 89.6],
                        ['2023\n上学年', 79.4, 82.2, 84.5],
                        ['2023\n下学年', 73.4, 87.9, 85.1]
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            };


            option && chart1.setOption(option);
            window.onresize = chart1.resize;

        },