记录~Echarts的使用

最新推荐文章于 2024-02-19 12:00:11 发布
最新推荐文章于 2024-02-19 12:00:11 发布
阅读量541 收藏
点赞数
分类专栏： 前端 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lq2016510/article/details/119801389
版权

效果：

 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <style>
        div {
            float: left;
        }
    </style>
</head>

<body>
<div id="data1" style="width: 600px;height:400px;"></div>
<div id="data2" style="width: 600px;height:400px;"></div>
<div id="data3" style="width: 600px;height:400px;"></div>
<div id="data4" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

    var communityData = ['浪心社区', '上屋社区', '塘头社区', '官田社区', '水田社区', '龙腾社区', '应人石社区', '罗租社区', '石龙社区', '宝源社区'];
    // 社区高频问题统计
    var problem = ['粘贴小广告', '路面坑洼' ,'公益广告脱落'];
    var problemData1 = [30, 40, 30, 22, 60,30, 40, 30, 22, 70];
    var problemData2 = [20, 20, 20, 20, 10,20, 20, 20, 20, 10];
    var problemData3 = [20, 20, 20, 24, 15,26, 26, 27, 27, 18];
    var myChart1 = echarts.init(document.getElementById('data1'));
    var option1 = {
        backgroundColor: '#fff',
        color: ['#20ACFF', '#50B862', '#FFBA33'],
        barWidth: 13,
        /*title: {
            text: '社区高频问题统计',
            subtext: '石岩街道数据'
        },*/
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            // left: '0%',
            top: '15',
            x:'right', //可设定图例在左、右、居中
            textStyle: { //图例文字的样式
                color: '#8C8C8C',
                fontSize: 12
            },
            data: problem,
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            splitLine: {
                show: false // 去除网格线
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#BFBFBF', // 坐标线的颜色
                    width: '1'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#000000' //坐标值的颜色
                },
                interval: 0,
            },
            boundaryGap: [0, 0.01],
            data: communityData,
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle:{
                    color: '#E8E8E8',
                    type: 'dashed' //设置间隔线为虚线
                }
            },
            axisTick: {
                show: false //小横线
            },
            splitArea: {
                // show: true // 保留网格区域
            },
            axisLine: {
                show: false, // 去除纵向边框线
                lineStyle: {
                    type: 'solid',
                    color: '#BFBFBF', // 坐标线的颜色
                    width: '1'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#595959' //坐标值的颜色
                }
            }
        },
        series: [
            {
                name: problem[0],
                type: 'bar',
                label: {
                    show: true,
                    position: 'top', // 位置
                    /*formatter: '{a}\n{@c}',*/
                    formatter: '{@c}',
                    color: '#000000',
                    fontSize: 12,
                    fontWeight: 'normal', // 加粗
                    distance: 5, // 距离
                    offset: [0, 2] // 偏移距离[横向，纵向]
                },
                data: problemData1,
            },
            {
                name: problem[1],
                type: 'bar',
                label: {
                    show: true,
                    position: 'top', // 位置
                    /*formatter: '{a}\n{@c}',*/
                    formatter: '{@c}',
                    color: '#000000',
                    fontSize: 12,
                    fontWeight: 'normal', // 加粗
                    distance: 5, // 距离
                    offset: [0, 2] // 偏移距离[横向，纵向]
                },
                data: problemData2,
            },
            {
                name: problem[2],
                type: 'bar',
                label: {
                    show: true,
                    position: 'top', // 位置
                    /*formatter: '{a}\n{@c}',*/
                    formatter: '{@c}',
                    color: '#000000',
                    fontSize: 12,
                    fontWeight: 'normal', // 加粗
                    distance: 5, // 距离
                    offset: [0, 2] // 偏移距离[横向，纵向]
                },
                data: problemData3,
            }
        ]
    };
    myChart1.setOption(option1);

    // 问题分布统计
    var questionData = [30, 40, 30, 22, 60,30, 40, 30, 22, 60];
    var myChart2 = echarts.init(document.getElementById('data2'));
    var option2 = {
        backgroundColor: '#ffffff',
        color: '#35ACFF',
        barWidth: 15,
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            height: '100%',
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true,
        },
        xAxis: {
            show: false,
            // type: 'category',
            // type: 'value',
            /*splitLine: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                type: 'solid',
                color: '#BFBFBF',
                width: '1'
              }
            },*/
            /*axisLabel: {
              textStyle: {
                color: '#595959'
              }
            },*/
            // boundaryGap: [0, 0.01],
            // data: communityData,
        },
        yAxis: [{
            // type: 'value',
            type: 'category',
            data: communityData,
            splitLine: {
                show: false,
                lineStyle:{
                    color: '#E8E8E8',
                    type: 'dashed' // 设置间隔线为虚线
                }
            },
            axisTick: {
                show: false //小横线
            },
            axisLine: {
                show: false,
                lineStyle: {
                    type: 'solid',
                    color: '#BFBFBF', // 坐标线的颜色
                    width: '1'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#000000' //坐标值的颜色
                },
                interval: 0,
            },
        },{
            type: 'value',
            show: false,
            min: 0,
            max: 1000000,
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false //小横线
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: '#000000' //坐标值的颜色
                },
                interval: 0,
            },
        }],
        series: [
            {
                type: 'bar',
                itemStyle: {
                    barBorderRadius: [10, 10, 10, 10] //控制柱状图的圆角显示弧度，（顺时针左上，右上，右下，左下）
                },
                label: {
                    show: true,
                    position: 'right',
                    color: '#000000',
                    fontSize: 12,
                    fontWeight: 'normal', // 加粗
                    distance: 5, // 距离
                    offset: [0, 0] // 偏移距离[横向，纵向]
                },
                data: questionData,
            },
        ]
    };
    myChart2.setOption(option2);

    // 办结情况统计
    var myChart3 = echarts.init(document.getElementById('data3'));
    var option3 = {
         /*title: {
              text: '办结情况'
         },*/
         tooltip: {
            trigger: 'axis'
         },
         legend: {
            /* top: '10',
             x:'right',
             icon: 'rect',
             textStyle: {
                 color: '#8C8C8C',
                 fontSize: 12
           },*/
          data: ['按时办结率', '超时办结率']
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: communityData,
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#BFBFBF', // 坐标线的颜色
                    width: '1'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#000000' //坐标值的颜色
                },
                interval: 0,
            },
            boundaryGap: [0, 0.01],
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle:{
                    color: '#E8E8E8',
                    type: 'dashed' //设置间隔线为虚线
                }
            },
            axisTick: {
                show: false //小横线
            },
            axisLine: {
                show: false, // 去除纵向边框线
                lineStyle: {
                    type: 'solid',
                    color: '#BFBFBF', // 坐标线的颜色
                    width: '1'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#595959',
                },
                formatter: '{value} %',
            }
        },
        series: [{
            name: '按时办结率',
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 4
            },
            label : {
                show: true,
                position: 'top',
                formatter: '{c} %',
                fontSize: 13,
                fontWeight: 'normal',
                color: '#000000',
            },
            data: [65, 85, 87, 75, 83, 89, 85, 86, 86, 75]
        },
            {
                name: '超时办结率',
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 4
                },
                label : {
                    show: true,
                    position: 'top',
                    formatter: '{c} %',
                    fontSize: 13,
                    fontWeight: 'normal',
                    color: '#000000',
                },
                data: [35, 15, 13, 25, 17, 11, 15, 14, 14, 25]
            }]
    };
    myChart3.setOption(option3);

    // 问题占比统计
    var myChart4 = echarts.init(document.getElementById('data4'));
    var option4 = {
        tooltip: {
            trigger: 'item',
            formatter: " {b}  <br/>共{c}个，占比{d}%",
        },
        legend: {
            orient: 'vertical',
            left:'85%',
            align:'left',
            top:'middle',
            itemWidth: 20,
            itemHeight: 10,
            itemGap: 30,
            data: ['粘贴小广告','路面坑洼','公益广告脱落','建筑物倒塌','垃圾可见','其它问题'],
        },
        series: [
            {
                name: '面积模式',
                type: 'pie',
                radius: [25, 125],
                center: ['50%', '50%'],
                // color:['#2E46FF','#537BFF','#53BCFE','#00FFFF','#20D667','#FF8D46','#FFF146','#FD5959',''],//饼图自定义颜色
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                label:{
                    formatter:" {b} \n{c}个，{d}%",
                    color: '#000000',
                    fontSize: 12,
                    backgroundColor: '#F2F2F2',
                    padding: [10, 10, 10, 10]
                },
                data: [
                    {value: 60, name: '粘贴小广告'},
                    {value: 50, name: '路面坑洼'},
                    {value: 40, name: '公益广告脱落'},
                    {value: 30, name: '建筑物倒塌'},
                    {value: 20, name: '垃圾可见'},
                    {value: 10, name: '其它问题'},
                ]
            }
        ]
    };
    myChart4.setOption(option4);

</script>
</body>
</html>

睡眠不足z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts动态展示数据
希望我快乐
01-15 3159
echarts 动态数据渲染 Demo直接在前端mock数据，实际使用需要从服务器拿取数据渲染。以下Demo代码对使用到的属性进行了说明，更多详情请查看echarts官方文档。 github链接：https://github.com/Biu-Huang/echart-demo.git 效果图：(柱状图跟饼图数据无关系) HTML <!DOCTYPE html> <html la...
echarts 甘特图
11-19 2159
一、需求 用图表形式展示单个设备告警开始时间、结束时间、持续时长；以及告警类型、是否恢复等等 二、图 该图表示： 1、矩形首尾：告警开始、结束时间 2、矩形长度：告警持续时常 3、颜色：告警等级 4、白色边框：该告警是否为误告 5、模糊光圈：该告警是否恢复 三、代码 initChart=()=>{ echarts.init(document.getElementById('profileChart')).dispose(); // 销毁实例 let chart = e
echarts图表之饼图、柱形图以及其它自定义图表
睡眠不足z的blog
08-23 551
echarts图表配置项文档 输出显示结果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>饼图和柱形图</title> <!-- 引入 echarts.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts
echarts基础
qq_62230186的博客
07-02 209
option选项
echarts自定义图表
前端与计算机相关知识的分享，博主的qq523235674
03-02 1932
效果：//得到下面线的中心坐标//得到上面线的中心坐标//根据x轴索引为1的数值得到所在的映射宽度*0.1fill: null});return {type: 'group', //上面那条线shape: {},},//中间垂直线shape: {},},//下面那条线shape: {},option = {tooltip: {},title: {text: '血压'},legend: {data: ['血压']},xAxis: {},
Echarts入门
weixin_42384816的博客
10-09 258
Echarts-介绍 常见的数据可视化库： D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 AntV 蚂蚁金服全新一代数据可视化解决方案 等等 Highcharts 和 Echarts 就像是 Office 和 WPS 的关系 ECharts，一个使用 JavaScript 实现的开源可
echarts.js - 动态数据 + 时间坐标轴
qq_29761395的博客
09-30 3631
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> &.
echarts入门到入土有时只需一篇博客
weixin_67260069的博客
07-02 213
echarts是基于javascript的图表插件(canvas)百度开发捐赠给apache基金会开源 设置容器 宽高 css样式 初始化 定义选项 设置选项 3.option选项 属性名 意义 title 标题 tooltip 鼠标经过提示 xAxis x轴 yAxis y轴 series 系列数据 option里面还有很多属性可以在官方网站查看 echart默认的主题有两种：light dark 也可以自己在官方网站中设置自定义样式 2.color:[“#f
echarts 自定义 睡眠
weixin_45052435的博客
02-19 764
#FFD157’,‘#C9C7F3’,‘#605BD0’,[12, 2],[38, 3],[4, 2],[58, 3],[38, 2],[46, 3],[20, 1],[32, 2],[98, 3],[12, 2],[4, 1],[20, 2],[50, 3],[50, 2],[8, 1],[68, 2],arr[0] = 0} else {// 数据数组。
echarts画图学习记录
03-20
echarts画图学习记录
echarts日历 记录信息
09-15
该文章配套资源 ...
树莓派使用DHT22温湿度传感器记录数据并使用flask、Echarts展示
03-16
推荐使用 DHT22 ，比 DHT11 精度高） python 3.5+ 、 mysql 导入相关库，例如： Adafruit_DHT 、 pymysql 、 flask 、 json 等。 上述环境准备工作完成后，将本项目代码下载解压到树莓派中。 数据采集 新建...
树莓派使用DHT22温湿度传感器记录数据并使用flask、Echarts展示.zip
01-24
推荐使用 DHT22 ，比 DHT11 精度高） python 3.5+ 、 mysql 导入相关库，例如： Adafruit_DHT 、 pymysql 、 flask 、 json 等。 运行指南 上述环境准备工作完成后，将本项目代码下载解压到树莓派中。
echarts常用语法
最新发布
05-15
文档中粗略记录了echarts的常见配置项，包括：legend、Title（表示图形上方的标题）、Tooltip（提示框配置）、splitLine（去除网格线）、selected（手动隐藏单个图例）、xAxis（x轴文字及其它类型的配置）、...
echarts 记录网站下载数
04-03
记录软件下载量，曲线图形式显示以及总数等，项目通俗易懂，接入方便
vue 项目中引入echarts并实现环形图
zhanwang_9050的博客
07-05 2435
1、安装命令：npm install echarts -S 2、在main.js中引入， import ECharts from 'vue-echarts/components/ECharts' import 'echarts/lib/chart/pie' import 'echarts/lib/component/tooltip' Vue.component('v-chart', EC...
如何使用ECharts绘制甘特图
热门推荐
acheding的博客
10-08 2万+
本文将从是什么(What)、为什么(Why)、怎么做(How)三个方面讲述如何使用ECharts绘制甘特图。
echarts数据可视化介绍+常用的图表案例分析（值得收藏的干活）
promise466的博客
10-28 7690
Echarts的优点比较明显体积小，免费、上手快，只需要有一些js基础，剩下的就是复制粘贴的事情，而且是国产的东西，文档看起来也比较方便
用echarts绘制流程图
liuli0927的博客
07-20 3101
当这两个流程图进行切换展示时，一定要使用v-show。
记录使用echarts-gl实现3d地图
10-12
要使用echarts-gl实现3d地图，需要先引入echarts和echarts-gl库，并在初始化echarts实例时指定使用echarts-gl。然后，需要准备好地图的数据和样式，包括地图的底图、标记点、线条等。最后，将数据和样式配置到echarts实例中即可。 以下是一个简单的示例代码： ```javascript // 引入echarts和echarts-gl库 import echarts from 'echarts'; import 'echarts-gl'; // 初始化echarts实例并指定使用echarts-gl const chart = echarts.init(document.getElementById('chart'), null, { renderer: 'webgl' }); // 准备地图数据和样式 const option = { globe: { baseTexture: 'path/to/baseTexture.jpg', heightTexture: 'path/to/heightTexture.jpg', displacementScale: 0.1, shading: 'realistic', environment: 'path/to/environment.jpg', light: { ambient: { intensity: 0.1 }, main: { intensity: 1.5 } } }, series: [{ type: 'scatter3D', coordinateSystem: 'globe', symbolSize: 10, itemStyle: { color: '#fff' }, data: [ [116.46, 39.92, 0], [121.48, 31.22, 0], [113.23, 23.16,0] ] }] }; // 将数据和样式配置到echarts实例中 chart.setOption(option); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值