echarts仪表盘更换样式全圆形换成半圆

简介: echarts仪表盘更换样式全圆形换成半圆

问题:想把图一的仪表盘默认样式换乘图二半圆的这个样式。官网中通过更换主题按钮切换的仪表盘样式,但是没有实际的demo~具体是怎么实现更换样式的?

其实很简单,只需要在series:里面加上开始角度和结束角度即可。

startAngle: 180, //开始角度 左侧角度
endAngle: 0, //结束角度 右侧

写了一个小的demo如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>三分钟上手之仪表盘</title>
        <!-- 引入 echarts.js -->
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery-1.11.3.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            myChart.setOption({
                //backgroundColor: '#000000',
                backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [{
                    startAngle: 180, //开始角度 左侧角度
                    endAngle: 0, //结束角度 右侧
                    name: '业务指标',
                    type: 'gauge',
                    detail: { formatter: '{value}%' },
                    axisLine: { // 坐标轴线  
                        lineStyle: { // 属性lineStyle控制线条样式  
                            color: [
                                [0.2, '#c23531'],
                                [0.8, '#63869e'],
                                [1, '#91c7ae']
                            ]
                        }
                    },
                    data: [{ value: 50, name: '完成率' }]
                }]
            });
            setInterval(function() {
                option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                myChart.setOption(option, true);
            }, 2000);
        </script>
    </body>
</html>

此demo的实现效果如下,妥妥的半圆

相关文章
Echarts组件tooltip提示框formatter函数返回的HTML样式解决方案
Echarts组件tooltip提示框formatter函数返回的HTML样式解决方案
411 0
|
3月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
279 2
|
3月前
|
算法 搜索推荐 Java
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
这篇文章介绍了如何使用Java后端技术,结合Graphics2D和Echarts等工具,生成包含个性化信息和图表的海报,并提供了详细的代码实现和GitHub项目链接。
160 0
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
|
5月前
|
数据可视化 Apache 索引
Vue3使用echarts仪表盘(gauge)
Apache ECharts 是一款强大的数据可视化库,其仪表盘图表(`gauge`)可用于展示度量数据。主要属性包括仪表盘数据源 `gaugeData`(必填)、容器宽度 `width`(默认 100%)及高度 `height`(默认 100%)。数据项需指定名称 `name` 和值 `value`,并支持额外属性。
322 2
Vue3使用echarts仪表盘(gauge)
关于ECharts仪表盘的全部相关配置
关于ECharts仪表盘的全部相关配置
111 0
|
8月前
|
JavaScript 数据可视化 前端开发
ECharts 的配置语法:配置选项、数据格式、样式设置
ECharts 的配置语法:配置选项、数据格式、样式设置
544 1
|
JSON 数据格式
Echarts分段折线图图例样式visualMap颜色修改
Echarts分段折线图图例样式visualMap颜色修改
229 1
|
8月前
|
JavaScript
封装echarts china map geo实现dispatch触发geoSelect事件高亮显示某个省份和城市,并定义复杂样式
封装echarts china map geo实现dispatch触发geoSelect事件高亮显示某个省份和城市,并定义复杂样式
echarts 仪表盘三分钟上手及属性修改示例
echarts 仪表盘三分钟上手及属性修改示例
188 0
170Echarts - 仪表盘(Gauge Car Dark)
170Echarts - 仪表盘(Gauge Car Dark)
47 0