echarts日历中插入饼图和点击事件。整理

最新推荐文章于 2023-08-31 15:42:05 发布
最新推荐文章于 2023-08-31 15:42:05 发布
阅读量4.3k 收藏 8
点赞数 4
分类专栏： ThinkPHP HTML+CSS 日历 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28761593/article/details/79569494
版权
ThinkPHP 同时被 3 个专栏收录
21 篇文章 0 订阅
订阅专栏
HTML+CSS
11 篇文章 0 订阅
订阅专栏
日历
2 篇文章 0 订阅
订阅专栏

echarts例子：http://echarts.baidu.com/examples/editor.html?c=calendar-pie
效果图：——————————————————————————————————————
这里写图片描述
需要文件：echarts.min.js——————-jquery.min.js
代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 800px;height:600px;"></div>
        <div id="html">

        </div>
        <script type="text/javascript">



            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var cellSize = [100, 100];//每一小格大小
            var pieRadius = 30;饼图//大小
            //此处应该是从数据库默认读取当天的数据格式
            var json = [
            {"data":[{"name": "已完成","value": 1},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 2},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 3},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 4},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 5},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 6},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 7},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 8},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 9},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 10},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 11},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 12},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 13},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 14},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 15},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 16},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 17},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 18},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 19},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 20},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 21},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 22},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 23},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 24},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 25},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 26},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 27},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 28},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 29},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            {"data":[{"name": "已完成","value": 30},{"name": "未完成","value": 103},{"name": "未巡查","value": 56}]},
            ]
            var startDate = '2017-04';
            var endDate = '2017-05';
            var data_name = ['已完成', '未完成', '未巡查'];//该出应该是从数据库中读取
            var options = calendar(cellSize,pieRadius,startDate,endDate,json,data_name);
            myChart.setOption(options);
            //添加点击事件
            myChart.on('click', function (params) {
                // 控制台打印数据的名称

                var  year_month = params.event.event.path[8].startDate;
                var day = params.seriesIndex;
                if(day<10){
                    day = "0"+day;
                }
                var year_month_day = year_month+"-"+day;//获取当前点击的年月日
                var status = params.name;//获取当前点击状态名称
                get_this_click_data({"datetime":year_month_day,"status":status});
            });
            //cellSize-----日历整体宽高
            //pieRadius----日历饼图大小
            //startDate----开始月份
            //endDate------结束月份
            //data---------数据集
            //data_name----数据描述名称
            function calendar(cellSize,pieRadius,startDate,endDate,json,data_name){
                var data_arr = [];

                for(var i = 0; i < json.length; i++) {
                    data_arr.push(json[i].data);

                }

                function getVirtulData() {
                    var date = +echarts.number.parseDate(startDate);
                    var end = +echarts.number.parseDate(endDate);
                    var dayTime = 3600 * 24 * 1000;
                    var data = [];
                    for(var time = date; time < end; time += dayTime) {
                        data.push([
                            echarts.format.formatTime('yyyy-MM-dd', time),
                            Math.floor(Math.random() * 10000)
                        ]);
                    }
                    return data;
                }

                function getPieSeries(scatterData, chart) {
                    return echarts.util.map(scatterData, function(item, index) {
                        var center = chart.convertToPixel('calendar', item);

                        return {
                            id: index + 'pie',
                            type: 'pie',
                            center: center,
                            label: {
                                normal: {
                                    formatter: '{c}',
                                    position: 'inside'
                                }
                            },
                            radius: pieRadius,
                            data: data_arr[index]
                        };
                    });
                }



            // 使用刚指定的配置项和数据显示图表。

                function getPieSeriesUpdate(scatterData, chart) {
                    return echarts.util.map(scatterData, function(item, index) {
                        var center = chart.convertToPixel('calendar', item);
                        return {
                            id: index + 'pie',
                            center: center
                        };
                    });
                }

                var scatterData = getVirtulData();

                var option = {
                    tooltip: {},
                    legend: {
                        data: data_name,
                        bottom: 20
                    },
                    calendar: {
                        top: 'middle',
                        left: 'center',
                        orient: 'vertical',
                        cellSize: cellSize,
                        yearLabel: {
                            show: false,
                            textStyle: {
                                fontSize: 30
                            }
                        },
                        dayLabel: {
                            margin: 20,
                            firstDay: 1,
                            nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
                        },
                        monthLabel: {
                            show: false
                        },
                        range: [startDate]
                    },
                    series: [{
                        id: 'label',
                        type: 'scatter',
                        coordinateSystem: 'calendar',
                        symbolSize: 1,
                        label: {
                            normal: {
                                show: true,
                                formatter: function(params) {
                                    return echarts.format.formatTime('dd', params.value[0]);
                                },
                                offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
                                textStyle: {
                                    color: '#000',
                                    fontSize: 14
                                }
                            }
                        },
                        data: scatterData
                    }]
                };

                if(!myChart.inNode) {
                    var pieInitialized;
                    setTimeout(function() {
                        pieInitialized = true;
                        myChart.setOption({
                            series: getPieSeries(scatterData, myChart)
                        });
                    }, 10);

                    myChart.onresize = function() {
                        if(pieInitialized) {
                            myChart.setOption({
                                series: getPieSeriesUpdate(scatterData, myChart)
                            });
                        }
                    };
                }
                return option;
            }
            //点击事件方法

            //根据点击事件获取相应数据
            function get_this_click_data(data){
                $("#html").html('<p>传入后台数据格式：{"datetime":'+data.datetime+',"status":'+data.status+'}<p>向后台请求当前点击的数据get_this_click_data</p>');
//              $.getJSON("__URL__/get_this_click_data",data,function(res){
//                  if(res){
//                      console.log("这是处理返回数据的逻辑");
//                  }
//              })
            }
        </script>
    </body>

</html>
qq_28761593
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
echars 日历饼图
maying0124的博客
07-14 1077
//日历饼图 var myChart = echarts.init(document.getElementById('container')); var cellSize = [106, 106]; //日历大少 var pieRadius = 44; //饼图大小 var app = {}; var incomclass=[[{name:"药费",value:900}, {name:"检查","value":1212}, {name:"治疗","value":3...
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
ECharts日历热力图点击事件和选中日期加边框
前端程序媛_Ying博客
06-06 612
切换日期时,选中框问题和日总计问题。
小例子：在 ECharts 中实现日历图
weixin_34309543的博客
04-19 1811
在 ECharts 发布的 3.5 版本中，新增了日历坐标系，用于在日历中绘制图表。如何快速写出一个日历图呢？ 通过以下三个步骤即可实现上述效果： 第一步：引入js文件 下载的 最新完整版本 echarts.min.js 即可，无需再单独引入其他文件哦。 &lt;script src="echarts.min.js"&gt;&lt;/script&gt; &lt;script&gt; /...
EChart学习——在日历中插入饼图
Blue___Ocean的专栏
06-11 3634
第一次使用EChart， 记录一下。功能：日历控件里面插入饼图，一张饼图有三个部分组成，鼠标移动上去能显示所需要的数据，另外对应的星期，日期，月份都需要显示在图上。首先去网上找一下例子，大概了解一下EChart第一步：引用Js，引用Js的时候我遇到了一个问题：我的项目是使用maven管理的，所以我在对应项目的pom.xml文件中写入如下配置：&lt;dependency&gt; &lt;gr...
186Echarts - 日历坐标系（Calendar Pie）
阿甘兄
05-05 983
效果图 源代码 var cellSize = [80, 80]; var pieRadius = 30; function getVirtulData() { var date = +echarts.number.parseDate('2017-02-01'); var end = +echarts.number.parseDate('2017-03-01'); var...
65Echarts - 饼图（Calendar Pie）
阿甘兄
04-30 1261
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
echarts图表静态数据 象形柱形图、折线图、日历饼图、饼状图四种实现
xiaoming4965的博客
08-31 825
echarts图表静态数据 象形柱形图、折线图、日历饼图、饼状图四种实现
echarts饼图扇区添加点击事件的实例
08-29
总的来说，ECharts提供了丰富的交互功能，使得开发者可以轻松地为图表添加点击事件和其他交互效果。通过理解ECharts的配置和事件监听机制，我们可以创建出富有交互性和吸引力的数据可视化应用。在实际项目中，根据...
echarts 3d饼图资源
05-12
ECharts 的 API 允许在运行时动态修改配置项，因此可以在用户交互时实时更新图表，如响应点击事件改变视角，或者根据筛选条件过滤数据等。 总之，这个 "echarts 3d饼图资源" 包含了构建 ECharts 3D 饼图所需的数据...
vue 项目引入echarts 添加点击事件操作
10-14
本文将详细介绍如何在Vue项目中引入ECharts以及如何添加点击事件操作。 首先，为了全局使用ECharts，我们需要在`main.js`文件中导入ECharts库。这可以通过以下代码完成： ```javascript import echarts from '...
ECharts柱状图和饼图实现案例
10-26
在ECharts中，你可以通过配置项设置柱状图的颜色、宽度、标签、数据项等属性，使得图表更加直观和具有吸引力。例如，你可以通过`series`配置项定义每个柱子的数据，通过`xAxis`和`yAxis`定义坐标轴，通过`tooltip`...
ajax动态赋值echarts的实例(饼图和柱形图)
10-18
下面小编就为大家分享一篇ajax动态赋值echarts的实例(饼图和柱形图)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决echarts中饼图标签重叠的问题
12-17
饼图中的series有个avoidLabelOverlap属性， avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 当avoidLabelOverlap设置为false时会出现...
echarts实现3D环装饼图带引导线效果
最新发布
01-25
首先，我们需要了解ECharts中的3D饼图。在ECharts 4.x版本之后，ECharts引入了3D图表的支持，包括3D饼图。3D饼图可以通过设置`series.type`为`'pie'`并启用`viewControl`的`projection`属性为`'cylinder'`来实现。这...
uniapp引入echarts日历图 点击事件
CheriseZhou的博客
08-03 885
div未设置高度引入的echarts.js版本太老main.js未引入代码引入的echarts.js版本太老echarts组件未写入onclick函数点击echarts组件报错，就把点击事件给父组件。
Echarts 定制化日历图
c.j.h_code的博客
07-16 1198
最近在做可视化，发现日历图挺有意思，分享一波吧！！！将它拉下备用后面在此基础解释并改造，如下代码运行结果如图：下面开始改造代码了！！！
echarts-日历图
王春红的博客
04-20 2285
Echarts实现日历图
vue项目中使用 Echarts的一些总结，包括饼图，折现图，折柱混图，年月日切换
不想起床
07-23 2715
先奉上官网地址，一切以官网为主 Echrts官网 Echarts的基本使用 安装 cnpm i echarts -S 全局使用 在main.js中引入,然后用变量，将其挂载到vue的原型上 import echarts from 'echarts' Vue.prototype.$echarts = echarts 在组件中，就可以直接使用 this.$echarts.init() 稍后会说按需引入 下面来说一个我在项目中的总结 先看这个图 折柱混合 首先是对数据的处理 我们首先是要在页面画
echarts怎么设置饼图的vue点击事件
07-15
### 回答1： 在使用Echarts制作饼图时，可以通过Vue来设置点击事件。首先，在Vue组件中引入Echarts库，然后在data中定义饼图的数据和配置项。接着，在mounted生命周期钩子函数中，使用document.getElementById找到饼图容器，创建Echarts实例并将数据和配置项传入。最后，在Echarts实例中通过on事件监听饼图的点击事件，并在回调函数中编写对应的逻辑。 具体的代码如下： ```vue <template> <div id="chart" style="width: 400px; height: 400px;"></div> </template> <script> import echarts from 'echarts'; export default { data() { return { chartData: [ { name: '数据1', value: 10 }, { name: '数据2', value: 20 }, { name: '数据3', value: 30 }, ], }; }, mounted() { const chartContainer = document.getElementById('chart'); const myChart = echarts.init(chartContainer); const option = { series: [ { type: 'pie', data: this.chartData, }, ], }; myChart.setOption(option); // 设置饼图的点击事件 myChart.on('click', (params) => { console.log(params.name); // 可以获取点击的数据项名称 console.log(params.value); // 可以获取点击的数据项值 console.log(params.data); // 可以获取点击的完整数据对象 // 在这里编写点击事件的逻辑处理代码 }); }, }; </script> ``` 在上述代码中，创建了一个id为"chart"的div元素作为饼图的容器，在mounted生命周期钩子函数中通过echarts.init方法创建了Echarts实例，并将数据和配置项传入setOption方法进行设置。然后使用on方法监听了饼图的点击事件，并在回调函数中可以获取到点击数据的名称、值和完整数据对象，可以根据需要编写点击事件的逻辑处理代码。 ### 回答2： 在Vue中使用ECharts进行饼图的开发，可以通过以下步骤实现点击事件的设置： 1. 首先，安装ECharts和Vue-ECharts库。可以通过npm或yarn进行安装，具体命令如下： ```bash npm install echarts vue-echarts ``` 2. 在Vue组件中导入所需的库文件，并引入所需的ECharts图表类型（例如：饼图）。需要注意的是，引入的是vue-echarts库，而不是echarts库。代码示例如下： ```javascript import echarts from 'echarts' import VueECharts from 'vue-echarts' import 'echarts/lib/chart/pie' ``` 3. 在Vue组件的template中添加饼图的容器，并绑定图表的配置和数据。示例代码如下： ```html <template> <div class="pie-chart"> <VueECharts :options="pieOptions" @click="handleClick"></VueECharts> </div> </template> ``` 4. 在Vue组件的script中定义饼图的配置和数据，同时编写点击事件的处理方法。示例代码如下： ```javascript export default { data() { return { pieOptions: { series: [ { type: 'pie', data: [ { value: 335, name: 'Apple' }, { value: 310, name: 'Banana' }, { value: 234, name: 'Orange' }, { value: 135, name: 'Pear' }, { value: 1548, name: 'Grape' } ] } ] } } }, methods: { handleClick(params) { console.log('点击事件触发', params) } } } ``` 5. 此时，点击饼图的扇区时，会触发点击事件，并将点击的相关信息作为参数传递给handleClick方法。你可以在handleClick方法中做一些逻辑处理，例如获取点击的数据信息或执行其他操作。 以上是使用Vue和ECharts实现饼图点击事件的基本步骤。你可以根据实际需求进行个性化的配置和事件处理。 ### 回答3： 在Echarts中设置饼图的Vue点击事件可以通过以下步骤实现： 1. 首先，确保你已经安装了Echarts和Vue的相关依赖，可以通过`npm`或者`yarn`进行安装。 2. 在Vue组件中引入Echarts的库和相关样式文件。 ```vue <template> <div> <div ref="chart" style="width: 100%; height: 400px;"></div> </div> </template> <script> import echarts from 'echarts'; export default { mounted() { // 在组件挂载完成后调用createChart方法创建饼图 this.createChart(); }, methods: { createChart() { // 创建饼图 const chart = echarts.init(this.$refs.chart); // 假设你已经有了相关的数据，将数据传入给饼图 const data = [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ]; // 设置饼图的配置项 const options = { series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '50%'], data: data, // 设置饼图的点击事件，一般绑定在series内的data上 emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 将配置项传入给饼图 chart.setOption(options); // 监听饼图的点击事件 chart.on('click', params => { // 这里可以根据params中的数据做相应的逻辑处理 console.log(params); }); } } }; </script> <style> /* 可以根据自己的需求设置样式 */ </style> ``` 以上代码段是一个基本的Vue组件，其中`<div ref="chart" style="width: 100%; height: 400px;"></div>`用于给饼图设置一个容器，并通过`ref`引用。 在`mounted`钩子函数中调用`createChart`方法来创建饼图，并在`createChart`方法中设置饼图的配置项，最后通过`chart.on('click', params => {})`监听饼图的点击事件，可以在回调函数中对点击事件进行处理。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_28761593

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值