关于ECharts仪表盘的全部相关配置

最新推荐文章于 2024-04-15 08:00:00 发布

VIP文章只爱吃菜不吃饭

最新推荐文章于 2024-04-15 08:00:00 发布

阅读量842

点赞数 2

分类专栏：日常积累文章标签： echarts 仪表盘配置

本文链接：https://blog.csdn.net/qq_42597536/article/details/89553370

版权

<html>
    <head>
        <meta charset="UTF-8">
        <title>单仪表盘案例</title>
        <!-- 引入 ECharts 文件 -->
        <script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
        <div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;"></div>
    </body>
</html>
<script type="text/javascript">
    // 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
    var chart1 = echarts.init(document.getElementById("chart1"));
    
    var colorTemplate1 = [[0.2, "rgba(255,0,0,0.8)"], [0.8, "rgba(0,255,255,0.8)"], [1, "rgba(0,255,0,0.8)"]];
    
    
    var data1 = [{
                    name: "安全度",
                    value: 85,
                }];
    
      
    // 指定图表的配置项和数据
    var option = {
        
        backgroundColor: "#000",
        
        tooltip: {              // 本系列特定的 tooltip 设定。   
                show: true,
                formatter: "{b}：{c}%",
                backgroundColor: "rgba(50,50,50,0.7)",  // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
                borderColor: "#333",        // 提示框浮层的边框颜色。...
                borderWidth: 0,             // 提示框浮层的边框宽。...
                padding: 5,                 // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设

最低0.47元/天解锁文章

只爱吃菜不吃饭

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
关于ECharts仪表盘的全部相关配置

<html> <head> <meta charset="UTF-8"> <title>单仪表盘案例</title>  <script src="js/echarts4.0.js" type="text/...
复制链接

扫一扫