Apiclound3 H5 Echart

最新推荐文章于 2024-06-26 11:56:44 发布
最新推荐文章于 2024-06-26 11:56:44 发布
阅读量101 收藏
点赞数
分类专栏： Apiclound3 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq873113580/article/details/126552098
版权

效果图

 

实现代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>ECharts</title>
    <style type="text/css">
        .row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .row .cell {
            border: solid 1px #d6b8b8;
            padding: 5px;
            width: 47%;
        }

        .head {
            font-weight: bold;
            font-size: 16px;
        }

        .center {
            color: #D9001B;
            font-weight: bold;
            font-size: 26px;
            border-bottom: solid 1px #196CE5;
            margin: 0px auto;
            width: 98%;
            padding-bottom: 5px;
            padding-top: 5px;
        }

        .footer {
            font-weight: bold;
            font-size: 14px;
            margin-top: 5px;
        }
    </style>
    <script src="../res/echarts.js"></script>
</head>

<body>
    <div class="row">
        <div class="cell">
            <div class="head">2022年合同额（未税）</div>
            <div class="center">1785万元</div>
            <div class="footer">计算进度：3191%</div>
        </div>
        <div class="cell">
            <div class="head">2022年合同额（未税）</div>
            <div class="center">1785万元</div>
            <div class="footer">计算进度：3191%</div>
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <div class="head">2022年合同额（未税）</div>
            <div class="center">1785万元</div>
            <div class="footer">计算进度：3191%</div>
        </div>
        <div class="cell">
            <div class="head">2022年合同额（未税）</div>
            <div class="center">1785万元</div>
            <div class="footer">计算进度：3191%</div>
        </div>
    </div>
    <!-- 饼图 -->
    <div id="pie" style="width: 100%;height:300px;"></div>
    <!-- 结算情况 -->
    <div id="pie_info" style="width: 100%;height:520px;"></div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 100%;height:400px;"></div>
    <script type="text/javascript">
        //结算情况
        var pie_info = echarts.init(document.getElementById('pie_info'));
        pie_info.setOption({
            title: [
                {
                    text: '结算员合同计算情况',
                    left: 'left'
                },
                {
                    subtext: '张三',
                    left: '120px',
                    top: '245px',
                    textAlign: 'center'
                },
                {
                    subtext: '李四',
                    left: '350px',
                    top: '245px',
                    textAlign: 'center'
                },
                {
                    subtext: '张三',
                    left: '120px',
                    top: '475px',
                    textAlign: 'center'
                },
                {
                    subtext: '李四',
                    left: '350px',
                    top: '475px',
                    textAlign: 'center'
                },
            ],
            // tooltip: {
            //     trigger: 'item'
            // },
            legend: {
                top: '20px',
                left: 'left'
            },
            series: [
                {
                    //name: '详细信息',
                    type: 'pie',
                    radius: '100px',
                    avoidLabelOverlap: false,
                    center: ['120px', '150px'],
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '15',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    label: {
                        normal: {
                            show: true,
                            //自定义显示格式(b:name, c:value, d:百分比)
                            formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                            position: 'inner'
                        }
                    },
                    data: [
                        { value: 300, name: '合同额' },
                        { value: 500, name: '结算额' },
                    ]
                },
                {
                    //name: '详细信息',
                    type: 'pie',
                    radius: '100px',
                    avoidLabelOverlap: false,
                    center: ['120px', '380px'],
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '15',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    label: {
                        normal: {
                            show: true,
                            //自定义显示格式(b:name, c:value, d:百分比)
                            formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                            position: 'inner'
                        }
                    },
                    data: [
                        { value: 300, name: '合同额' },
                        { value: 500, name: '结算额' },
                    ]
                },
                {
                    //name: '详细信息',
                    type: 'pie',
                    radius: '100px',
                    avoidLabelOverlap: false,
                    center: ['350px', '150px'],
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '15',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    label: {
                        normal: {
                            show: true,
                            //自定义显示格式(b:name, c:value, d:百分比)
                            formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                            position: 'inner'
                        }
                    },
                    data: [
                        { value: 800, name: '合同额' },
                        { value: 600, name: '结算额' },
                    ]
                }
                , {
                    //name: '详细信息',
                    type: 'pie',
                    radius: '100px',
                    avoidLabelOverlap: false,
                    center: ['350px', '380px'],
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '15',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    label: {
                        normal: {
                            show: true,
                            //自定义显示格式(b:name, c:value, d:百分比)
                            formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                            position: 'inner'
                        }
                    },
                    data: [
                        { value: 800, name: '合同额' },
                        { value: 600, name: '结算额' },
                    ]
                }
            ]
        });
        //饼图
        var pie = echarts.init(document.getElementById('pie'));
        pie.setOption({
            title: {
                text: '饼图设计',
                left: 'left'
            },
            // tooltip: {
            //     trigger: 'item'
            // },
            legend: {
                top: '20px',
                left: 'left'
            },
            series: [
                {
                    //name: '详细信息',
                    type: 'pie',
                    radius: ['50%', '80%'],
                    avoidLabelOverlap: false,
                    center: ['50%', '50%'],
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '15',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    label: {
                        normal: {
                            show: true,
                            //自定义显示格式(b:name, c:value, d:百分比)
                            formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                            position: 'inner'
                        }
                    },
                    data: [
                        { value: 1048, name: '已结算' },
                        { value: 735, name: '未结算' },
                    ]
                }
            ]
        });
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

Teln_小凯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue】 在vue2项目中使用echarts
amoureux555的博客
02-28 3105
在vue2项目中使用echarts
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
热门推荐
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
vue2中echarts使用
qq_60976312的博客
01-10 2222
vue2中echarts使用
ECharts入门
qq_45835940的博客
01-03 3230
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="...
vue2中echarts的使用
最新发布
KMINLIKE的博客
06-26 651
在vue2中echarts的使用，echarts版本4.9.0；echarts双y轴柱状图示例
在Vue2中快速使用ECharts
爱敲键盘的程序源的博客
12-28 2720
在Vue2中快速使用ECharts(持续更新)
yolov3.h5，物体检测模型
12-03
yolov3.h5是预训练好的yolo模型，可供测试和预训练使用。
基于echarts封装的H5移动端、门户网站股票行情图表合集（分时图、K线图、MACD等技术指标附图）.zip
04-09
3、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。 基于echarts封装的H5移动端、门户网站股票行情图表合集（分时图、K线图、MACD等技术指标附图）.zip 基于echarts封装的...
eChart类v1.1.0，易语言写H5页面-易语言
06-14
本模块可用快速来生成：柱形图,折线图,梯线图,曲线图,柱线图,饼型图,环型图 暂无交互功能（仅用来显示，也可自己尝试使用js或者填表等添加交互功能）。 支持IE或者chrome内核浏览器控件（IE需9.0以上），支持EX_UI。...
h5登录界面下载
12-16
3. 登录按钮：用户提交信息的触发器，一般使用`<button>`标签创建，同时通过JavaScript处理点击事件，执行验证和数据提交。 4. 注册链接：对于新用户，提供注册选项是必要的。这可能是一个链接或按钮，同样用`<a>`...
Echarts 动态实现柱状图、折线图、饼状图的切换
wqwq093030的博客
03-06 1458
【代码】Echarts 动态实现柱状图、折线图、饼状图的切换。
vue2中使用echarts
Lydia
07-18 3546
vue中使用echarts
echarts在vue2中的简单使用
weixin_47030180的博客
11-20 5515
因项目需要，需要大量的展示数据，但是大量的使用表格对于界面观感不好，所以采用了echarts来对数据进行展示，下面我来详细介绍echarts在vue中的使用方法： 在vue中安装echarts 以vscode编辑器和vue-cli为例 用vue创建项目这里一笔带过 打开终端使用命令行输入 npm i echarts--save 在package.json中可以查看到 3.为了使用的方便我们选择将在vue的原型上加入echarts 打开 main.js import echarts from '
如何在vue2里面使用echarts
weixin_52332409的博客
05-29 3040
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']第五步写echatr使用的时候直接使用this.$echarts.xxx就可以了。-- 为 ECharts 准备一个定义了宽高的 DOM -->ok,如果你想使用其他的示例图表可以去官网替换掉 option里面的东西。// 基于准备好的dom，初始化echarts实例。// 使用刚指定的配置项和数据显示图表。3. 使用 -main.js（在这里使用第二种）第三步在main.js（在这里使用第二种）
在vue2中使用echarts,vue-echarts,v-charts
jieyucx的博客
03-28 5452
可以看到使用 组件了之后可以省去那些繁琐的获取。注册组件之后我们全局都可以直接使用组件了。同样的安装导入，v-charts同样依赖echarts。的原型上，这样我们在全局都可以通过。钩子中写逻辑代码，具体步骤如下，步骤差不多，只不过我们需要在。准备工作做好了，咱们看个例子。绘制如图所示的一个示例图。代码只是圈住的图的部分。
在vue2中使用echarts
肥晨开发的学习之路
02-20 3805
1.安装 npm install echarts --save 2.引入 全局引入(main.js) import echarts from 'echarts' Vue.prototype.$echarts=echarts//如果报错可以使用 import *as echarts from 'echarts' 局部引用(页面script) import echarts fro...
在vue2项目中使用echarts
qq_66390045的博客
08-24 3386
在vue项目中使用echarts
uniapp h5+echart
10-26
UniApp是一种使用Vue.js开发跨平台应用的框架，可以将代码编译成多个平台（包括H5、小程序、App等）的应用。UniApp具有开发效率高、维护成本低和跨平台兼容性强的优点。 而Echarts是一款基于Javascript的数据可视化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值