echarts环图配置

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

echarts环图配置

1、安装echarts

npm install echarts@4.9.0

2、页面引入echarts

import echarts from 'echarts';

3、应用

template片段

<div class="chart-wrap">
	<div id = "treeChart" style = "width: 180px; height:180px;" ></div>
	<div class="total" :style="{color: handleThemeColor(totlal).titleColor}">{{ totlal >= 8 ? '优秀' : totlal <= 3 ? '不及格' : '及格' }}</div>
</div>

script方法

showChart() {
    let myChart = echarts.init(document.getElementById('treeChart'));
    let value = this.totlal; //当前进度
    let maxValue = 10; //进度条最大值
    let startBg = this.circleColor.start;
    let endBg = this.circleColor.end;
    let option = {
        legend: {
            orient: 'vertical',
            x: 'left',
        },
        graphic: [
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '30%',
                z: 2,
                zlevel: 100,
                style: {
                    text: '总得分',
                    textAlign: 'center',
                    fill: '#666666',
                    fontSize: 12,
                },
            },
            {
                type: 'text',
                left: 'center',
                top: '46%',
                z: 2,
                zlevel: 100,
                style: {
                    text: this.totlal,
                    textAlign: 'center',
                    fill: this.themeColor,
                    fontSize: 62,
                },
            },
        ],

        series: [
            // 进度条
            {
                startAngle: 210,
                type: 'pie',
                radius: ['72%', '100%'],
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                hoverAnimation: false, //鼠标悬浮是否有区域弹出动画,false:无 true:有
                avoidLabelOverlap: false,
                silent: true, //取消鼠标移入高亮效果: 不响应和触发鼠标事件
                animationEasing: 'cubicOut',
                data: [
                    //value当前进度 + 颜色
                    {
                        value: value,
                        itemStyle: {
                            //渐变颜色
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: startBg, // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: endBg, // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                    {
                        value: maxValue - value,
                        itemStyle: {
                            //渐变颜色
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#eee', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#eee', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                    //(maxValue进度条最大值 - value当前进度) + 颜色
                    {
                        value: 5,
                        itemStyle: {
                            // 径向渐变颜色
                            color: {
                                type: 'radial',
                                x: 1,
                                y: 1,
                                r: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#eee', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#eee', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                            borderColor: '#fff',
                            borderWidth: 6
                        },
                    },
                ],
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //随着浏览器窗口大小改变而改变
    window.addEventListener('resize', function () {
        myChart.resize()
    })
}

css样式

.chart-wrap {
  position: absolute;
  right: 78px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #FFFFFF;
  overflow: hidden;
}

#treeChart {
  position: absolute;
  top: 10px;
  left: 10px;
}

.total {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 13px;

  font-size: 16px;
  font-weight: 500;
}

最终效果

echarts环图配置,echarts,前端,javascript文章来源地址https://www.toymoban.com/news/detail-699444.html

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

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

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

相关文章

  • 有向无环图的拓扑排序理解和算法

    有向无环图的拓扑排序理解和算法 有向无环图(DAG)定义 引用子维基百科的DAG定义, 在数学中,尤其是图论和计算机科学中,DAG是一类不含环的有向图(In mathematics, particularly graph theory, and computer science, a directed acyclic graph (DAG) is a directed graph with no directed cycles). 对比之前的有向图

    2024年02月04日
    浏览(44)
  • 【Echarts系列】—echarts柱状图配置代码详解

    简介 :本文将从头开始,带你快速上手 echarts最常用图例—柱状图 准备 :请自行先将echarts图例引入你的项目,本文不多介绍。(自取——:Vue3+Ts项目引入Echarts详细教程 ) 心得 :echarts 的基础使用还是较为简单的,看起来属性很多,但是自己上手多写几个图,慢慢的就会发

    2024年02月05日
    浏览(35)
  • 前端echarts地图3D效果+点击地域出现弹出框可以有确定取消操作

    效果图如下:    代码如下: 运行3D项目要安装一下echarts-gl依赖: 引入的jiangsu文件要单独下载json文件,附上两个网址: DataV.GeoAtlas地理小工具系列 POI数据|高德POI|高德兴趣点|高德POI数据|高德POI下载|高德POI数据库|高德POI分类|高德北京市POI|高德上海市POI|高德广州市POI|高德

    2024年02月11日
    浏览(43)
  • ECharts 柱状图常用配置

     代码如下:

    2024年02月11日
    浏览(35)
  • echarts 中的legend 配置

    legend: { show: true, // 是否显示图例 type: \\\'category\\\', // \\\'plain\\\':普通图例。缺省就是普通图例; \\\'scroll\\\':可滚动翻页的图例。当图例数量较多时可以使用 z: 2, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 top: \\\'auto\\\' // 距离容器侧边距离 bottom: \\\'au

    2024年02月15日
    浏览(33)
  • echarts 配置相关

     echarts更多模板链接  ECharts 作品集 1、echarts.clear()是清空当前实例,会移除实例中所有的组件和图表。      echarts.dispose()是销毁实例,销毁后实例无法再被使用。 2、series虽然是[] 数组,但是仍然会保留上次查询所得结果,使用myChart.setOption(option,true)语句可以更新页面效果

    2024年02月09日
    浏览(22)
  • 【数据结构】有向无环图(AOE-网)的关键路径(C语言)

    把用顶点表示事件,用弧表示活动,弧的权值表示活动所需要的时间的有向无环图称为 边表示活动的网 ,简称 AOE-网 。 在AOE-网中存在唯一的、入度为0的顶点,称为 源点 ;存在唯一的、出度为0的顶点,称为 汇点 。从源点到汇点的最长路径长度即为完成整个工程任务所需的

    2024年02月07日
    浏览(42)
  • Echarts常用配置项(详细入门)

    目录 前言福利:推荐几个EChart常用的社区网站 第一章、如何使用Echarts 1.1 使用Echarts五步走 1.2  了解版块的几个基本参数 1.3 几个常用图形的参数 1.3.1 柱状图 1.3.2 折线图 1.3.3 散点图 1.3.4 饼图 1.3.5 地图 1.3.6 雷达图 1.3.7 仪表图 1.4 Echarts使用 PPChart - 让图表更简单 echarts图表集

    2024年02月06日
    浏览(32)
  • web前端框架Javascript之JavaScript 异步编程史

    早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成了流量的浪费,而且一来一回也延长了页面的响应时间,总

    2024年02月14日
    浏览(54)
  • 有向无环图的应用—描述表达式、AOV网、AOE网

    目录 一、有向无环图描述表达式 二、拓扑排序 相关概念  实现方法  算法代码  补充 三、关键路径 相关概念  算法步骤  补充  四、总结图的应用我们都学了什么 有向无环图 :若一个有向图中不存在环,则称为有向无环图,简称DAG图。  对于一个表达式 ( (a+b)* ( b*(c+d)

    2024年02月12日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包