使用Echarts创建仪表盘

Siesta
830 阅读1分钟

885abe97ecbd7e4a9f7f4b2de9dea504.jpg

Echarts

Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型和交互方式，可以帮助开发者快速构建各种数据可视化应用。其中，仪表盘是一种常见的数据可视化形式，可以直观地展示数据的大小和变化趋势。本文将介绍如何使用Echarts创建一个简单的仪表盘。

准备工作（基于html）

首先，我们需要引入Echarts库和相关的样式文件。可以通过以下方式在HTML页面中引入：

<!DOCTYPE html>
<html> 
<head>
<meta charset="utf-8">
<title>Echarts仪表盘</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.css"> </head> 
<body>
<div id="chart" style="width: 600px; height: 400px;"></div> 
</body>
</html>

其中，echarts.min.js是Echarts库的核心文件，echarts.min.css是相关的样式文件。<div>标签用于容纳图表。

创建仪表盘

var chart = echarts.init(document.getElementById('chart'));

var option = {
    series: [
        {
            type: "gauge",
            startAngle: 190,
            endAngle: -10,
            min: 0,
            max: 1500,
            splitNumber: 5,
            radius: '80',
            center: ["50%", "80%"],
            itemStyle: {
                color: '#FFF',
                shadowColor: 'rgba(200,200,255,0.45)',
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2,
            },
            progress: {
                show: true,
                roundCap: true,
                width: window.screen.width < 1300 ? 4 : 8,
            },
            pointer: {
                icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
                length: "70%",
                width: 4,
                offsetCenter: [0, "5%"],
            },
            axisLine: {
                roundCap: true,
                lineStyle: {
                    width: window.screen.width < 1300 ? 4 : 8,
                    color: [[1, '#AF5A5A']],
                },
            },
            axisTick: {
                distance: 0,
                splitNumber: 1,
                lineStyle: {
                    width: 2,
                    color: "#fff",
                },
            },
            splitLine: {
                distance: 0,
                length: 0,
                lineStyle: {
                    width: 2,
                    // color: "#F00",
                },
            },
            axisLabel: {
                distance: 6,
                color: "#fff",
                fontSize: 10,
                show: false,
            },
            title: {
                show: false,
            },
            detail: {
                offsetCenter: ["0%", "20%"],
                valueAnimation: true,
                formatter: "{value} ",
                color: "#033462",
                fontSize: 20,
            },
            data: [
                {
                    value: 0,
                    title: {
                        show: true,
                        offsetCenter: ["0%", "-50%"],
                        valueAnimation: true,
                        color: "#FFF",
                        fontSize: 14,
                    },
                },
            ],
        },
    ],
};

chart.setOption(option);

在上面的代码中，我们定义了一个gauge类型的系列，设置了仪表盘的起始角度、最小值、最大值、分割数、半径、中心位置等参数。itemStyle用于设置仪表盘的样式，progress用于设置进度条的样式，pointer用于设置指针的样式，axisLine、axisTick、splitLine、axisLabel、title、detail等属性用于设置仪表盘的各个部分的样式和显示内容。data属性用于设置仪表盘的初始值。

最后，我们调用setOption方法将配置应用到Echarts实例中，即可在页面上显示出仪表盘。

写vue了那肯定少不了封装

1·首先，您需要安装Echarts。您可以使用npm或yarn来安装它。例如，使用npm，您可以运行以下命令：

npm install echarts --save

yarn add echarts

2·在您的Vue组件中，您需要导入Echarts：

import echarts from 'echarts'

import * as echarts from "echarts/core"

3·创建一个单独的组件来封装Echarts。在组件中引入Echarts并创建一个div元素来显示图表

<template>
  <div ref="chart" style="width:100%;height:400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'EchartsComponent',
  props: {
    // 传入的数据
    data: {
      type: Object,
      required: true
    }
  },
  mounted() {
    // 创建图表
    const chart = echarts.init(this.$refs.chart);
    // 设置图表配置项和数据
    chart.setOption(this.data);
  }
}
</script>

4·在父组件中，可以引入Echarts组件并传入图表数据

<template>
  <div>
    <echarts-component :data="chartData" />
  </div>
</template>

<script>
import EchartsComponent from './EchartsComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    EchartsComponent
  },
  data() {
    return {
      chartData: {
        // 图表配置项和数据
      }
    }
  }
}
</script>

结语

echarts里面具体的参数就不多介绍，网上很多 找了一个 ,在项目上封装之后会使用一个js文件来专门放一下 echarts的数据会更加方便

avatar
文章
阅读
粉丝