echarts篇之仪表盘

原创

已于 2023-12-28 16:02:04 修改 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2023-09-06 16:30:05 首次发布

本文讲解了如何在Vue应用中利用ECharts4.9和5版本构建一个包含三个层次的仪表盘，包括轴线、刻度和数据驱动配置。

实现一个这样的仪表盘

1.安装echarts并且引入使用，此版本使用的4.9版本

2.4版本需要自己手动绘制3个半圈，5版本官网上有属性，可以不用自己配置最内层的虚线圈

axisTick: {
                show: true, // 是否显示刻度(线),默认 true
                splitNumber: 8,
                length: 5,
                lineStyle: {
                  width: 1,
                  color: pink
                },
                distance:5
              },

3. 4版本代码如下

<template>
  <div :class="$style.root">
    <div ref="chart" :class="$style.rootChart" />
    <div :class="$style.tip">{
  
  { value }}{
  
  { word }}</div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    value: {
      type: [Number, String],
      default: 70
    },
    word: {
      type:

最低0.47元/天解锁文章