Echats-自定义图表1

这篇具有很好参考价值的文章主要介绍了Echats-自定义图表1。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:

Echats-自定义图表1,Echats,echarts

代码:文章来源地址https://www.toymoban.com/news/detail-741709.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图表</title>
    <style>
        #main {
            width: 241.82px;
            height: 188px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="main"></div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            series: [
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    center: ['50%', '60%'], // 主体位置
                    radius: '100%', // 圆盘大小
                    min: 0,
                    max: 1,
                    splitNumber: 8, // 刻度线单位
                    itemStyle: {
                        color: '#000'
                    },
                    // 表盘主体
                    axisLine: {
                        lineStyle: {
                            width: 14,
                            color: [
                                [0.5, '#58D9F9'],
                                [0.75, '#7CFFB2'],
                                [1, '#FDDD60']
                            ]
                        }
                    },
                    // 指针
                    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: '60%',
                        width: 10,
                        offsetCenter: ['-15%', '0%'],
                        itemStyle: {
                            color: '#ccc'
                        }
                    },
                    // 小刻度线
                    axisTick: {
                        distance: -30, // 位置
                        length: 4,
                        lineStyle: {
                            color: '#ccc',
                            width: 2
                        }
                    },
                    // 大刻度分界线
                    splitLine: {
                        show: false // 不展示
                    },
                    // 刻度线文字
                    axisLabel: {
                        color: '#ccc',
                        fontSize: 16,
                        distance: -20,
                        formatter: function (value) {
                            if (value === 1) {
                                return '100';
                            } else if (value === 0) {
                                return '0';
                            }
                            return '';
                        }
                    },
                    title: {
                        offsetCenter: [0, '65%'],
                        fontSize: 14
                    },
                    detail: {
                        fontSize: 30,
                        offsetCenter: [0, '35%'],
                        valueAnimation: true,
                        formatter: function (value) {
                            return `${value * 100}%`; // 计算百分率
                        },
                        color: 'inherit'
                    },
                    data: [
                        {
                            value: 0.765,
                            name: '累计执行率'
                        }
                    ]
                },
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    center: ['50%', '60%'], // 主体位置
                    radius: '120%', // 圆盘大小
                    min: 0,
                    max: 1,
                    splitNumber: 8, // 刻度线单位
                    axisLine: {
                        lineStyle: {
                            color: [[1, '#ccc']],
                            width: 2
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    anchor: {
                        show: false
                    }
                },
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    center: ['50%', '60%'], // 主体位置
                    radius: '65%', // 圆盘大小
                    min: 0,
                    max: 1,
                    splitNumber: 8, // 刻度线单位
                    axisLine: {
                        lineStyle: {
                            color: [[1, '#ccc']],
                            width: 0.6
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    anchor: {
                        show: false
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    </script>
</body>

</html>

到了这里,关于Echats-自定义图表1的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue-echarts踩坑,本地开发可以渲染echarts图表,线上环境图表渲染不出来

    main.js 全局注册v-chart组件 在页面中使用 如上图,我开始写的静态数据,在data中定义了chartOption1:{…配置项…}, 在接口数据返回之后,更新了配置项,在本地开发环境可以正常渲染。但是线上环境出不来,也不报错,接口数据一切正常。 解决办法: 无奈最后没有使用‘vue-e

    2024年01月18日
    浏览(51)
  • 【ECharts系列】ECharts 图表渲染问题&解决方案

    echats 渲染,第一次的时候只出现Y轴数值,不出现X轴数值,切换下页面,X轴数值就能出现。  如果在使用ECharts渲染时,X轴数值只在切换页面后才出现,可能是因为ECharts在初始化时没有正确计算X轴的尺寸。 以下是可能的原因和解决方法: 数据格式不正确 没有设置X轴的类型

    2024年02月12日
    浏览(47)
  • 图表库-Echarts

    一. Echarts 1. 概述 常见的数据可视化库: D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案 等等

    2023年04月18日
    浏览(45)
  • 【图表】echart

    ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用

    2024年02月10日
    浏览(35)
  • Echarts实现3d图表

    注意:在使用一些3d类的echart的时候会发现报下面的错误  这个是因为echarts引用3d图形需要引入echarts和echarts-gl (这里我们可能会遗漏掉引入echarts-gl) 要注意不同版本echarts对应不同版本echarts-gl 【如果版本不匹配就重新安装对应版版本】

    2024年02月16日
    浏览(38)
  • Vue+Echarts图表动态适配

    目录 前言 一、问题背景 二、解决方案 1.在Vue组件中引入Echarts 2.初始化图表 3.监听resize事件 4.销毁图表 三、优化方案 1.防抖 2.节流 四、总结 在实际的前端开发过程中,动态适配是一个非常重要的问题。在数据可视化的场景下,图表的动态适配尤为重要。在本篇博客中,我们

    2024年02月05日
    浏览(45)
  • 项目中的Echarts图表统计

    前情提要:本次Echarts数据可视化基于图书管理系统设计 Echarts是一个开源的 可视化图表库 ,由百度前端技术部开发维护。它基于JavaScript语言实现,通过简单的配置即可生成丰富多样的图表,包括柱状图、折线图、饼图等等。Echarts支持各种数据格式,如JSON、XML、CSV等,同时

    2024年02月08日
    浏览(47)
  • 小程序使用echarts图表-雷达图

    本文介绍下小程序中如何使用echarts 如果是通过npm安装,这样是全部安装的,体积有点大 我这边是使用echarts中的一个组件来实现的,下边是具体流程,实际效果是没有外边的红色边框的,加红色边框的效果是这篇说明 1.echarts光网有提到一个小程序组件 echarts-for-weixin点击下载

    2024年01月21日
    浏览(43)
  • vue+echarts图表的基本使用

    在实际开发当中,我们经常需要用到一些图表来实现数据可视化,这时候 echarts 可以帮助我们实现数据的展示。这里将介绍如何使用前端框架vue+echarts来实现数据可视化。 长话短说,echarts就是一个帮助数据可视化的库。 代码:直接复制代码创建一个vue组件,到App中引入组件

    2024年02月15日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包