`

ECharts-calendar-pie

 
阅读更多
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 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: [
                {name: '工作', value: Math.round(Math.random() * 24)},
                {name: '娱乐', value: Math.round(Math.random() * 24)},
                {name: '睡觉', value: Math.round(Math.random() * 24)}
            ]
        };
    });
}

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();

option = {
    tooltip : {},
    legend: {
        data: ['工作', '娱乐', '睡觉'],
        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: ['2017-02']
    },
    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 (!app.inNode) {
    var pieInitialized;
    setTimeout(function () {
        pieInitialized = true;
        myChart.setOption({
            series: getPieSeries(scatterData, myChart)
        });
    }, 10);

    app.onresize = function () {
        if (pieInitialized) {
            myChart.setOption({
                series: getPieSeriesUpdate(scatterData, myChart)
            });
        }
    };
}
  • 大小: 46.5 KB
分享到:
评论

相关推荐

    echarts-all.js

    - 饼图(pie):用于表示部分与整体的关系。 - 散点图(scatter):可以展示数据的分布情况。 - 地图(map):用于地理数据的可视化。 - K 线图(candlestick):常用于金融市场的数据分析。 - 雷达图(radar)...

    echarts-5.4.3.zip

    6. **图表类型**:ECharts 支持多种图表类型,如柱状图(bar)、折线图(line)、饼图(pie)、地图(map)等,每种图表都有自己的特性和应用场景。例如,柱状图适合比较不同类别的数值,折线图则适合展示数据随时间...

    echarts-2.2.7.zip

    - **饼图(pie)**:表示部分与整体的关系。 - **散点图(scatter)**:用于二维空间中展示数据分布。 - **地图(map)**:结合地理信息,展示地域数据差异。 - **仪表盘(gauge)**:模拟物理仪表,展示单一...

    Echarts-配置项手册.zip

    - **图表类型**:ECharts支持多种图表,如line(折线图)、bar(柱状图)、scatter(散点图)、pie(饼图)、map(地图)等,可以根据数据类型和展示需求选择合适的图表。 - **数据加载**:ECharts可以通过JSON、...

    incubator-echarts-master 源码,有需要的小伙伴可以下载

    - **图表**:ECharts 提供了多种图表类型,如 bar(柱状图)、line(折线图)、pie(饼图)、scatter(散点图)等。每个图表类型都有对应的配置项和方法,通过源码可以理解其内部绘制逻辑和数据处理过程。 - **...

    echarts-m-1.0.0.zip

    1. **基础图表类型**:ECharts 支持多种基本图表,包括柱状图(bar)、折线图(line)、饼图(pie)、散点图(scatter)和地图(map)。这些图表可用于显示不同种类的数据,如数量对比、趋势分析、占比等。 2. **多...

    Echarts-4.0.4-官方实例-常用图表

    3. **饼图(Pie Chart)**: 饼图将数据以扇形划分,用于显示各部分占总体的比例。ECharts允许自定义扇区颜色、添加标签、设置渐变色、动画效果,以及使用南丁格尔玫瑰图等。 4. **雷达图(Radar Chart)**: ...

    在vue中使用vue-echarts-v3的实例代码

    &lt;IEcharts :option="pie" @ready="onReady" @click="onClick"&gt;&lt;/IEcharts&gt; import IEcharts from 'vue-echarts-v3/src/lite.js'; import 'echarts/lib/component/title'; import 'echarts/lib/component/...

    基于ECharts GL的3D图表展示设计与实现

    6. **3D饼图(Pie3D)**:展示部分占总体的比例关系。 **3D图表的配置与属性** 在ECharts GL中,创建3D图表需要设置一系列的配置项。这些配置项包括但不限于: - `series-type`:指定图表类型,如`'bar3D'`或`'...

    echarts-doc-example-start文档合集

    - **图表类型**:熟悉ECharts提供的所有图表类型,如line(折线图)、bar(柱状图)、scatter(散点图)、pie(饼图)等。 - **数据动态更新**:学习如何动态地更新图表数据,实现数据实时刷新。 - **交互功能**:...

    echarts2.2.7

    ECharts 2.2.7 是一个开源的、基于 JavaScript 的数据可视化库,它由百度公司开发并维护。这个版本的 ECharts 提供了丰富的图表类型,包括柱状图、折线图、饼图、散点图等,适用于各种数据分析和展示需求。"有静态...

    echarts-demo.rar

    Echarts 是一个由百度开发的开源数据可视化库,它提供了丰富的图表类型,如柱状图、饼图、线图、地图等,适用于各种 Web 数据展示需求。本压缩包 "echarts-demo.rar" 内含一系列 Echarts 示例页面,以及相关的 CSS ...

    [软件][编程开发]echarts-master

    2. **图表类型**:ECharts 支持多种图表类型,包括但不限于折线图(line)、柱状图(bar)、饼图(pie)、散点图(scatter)、地图(map)等,满足不同场景的数据展示需求。 3. **交互性**:ECharts 提供丰富的交互...

    incubator-echarts-master.zip

    例如,`src/chart`目录下有各种图表(如line、bar、pie等)的实现,而`src/component`则包含了坐标轴、图例、工具提示等基础组件。 2. **测试html**: 压缩包中的测试html文件用于验证ECharts的功能和性能,它们...

    echarts-master.zip

    - 饼图(pie):展示部分与整体的比例关系。 - 散点图(scatter):用于显示两个或更多变量之间的关系。 - 地图(map):结合地理数据,展示地域间的数值差异。 3. **交互功能**:ECharts 支持多种交互操作,如...

    echarts.min.js, echarts插件

    1. **多样的图表类型**:ECharts 支持多种图表,包括但不限于条形图(bar)、折线图(line)、饼图(pie)、环形图(ring)、散点图(scatter)和K线图(candlestick),以及组合图表和自定义图表,满足各种数据分析...

    Echarts-4.0.4-官方实例-所有2D图表

    3. 饼图(Pie Chart):饼图用于表示整体与部分之间的比例关系,每个扇区代表一个部分的占比。ECharts的饼图支持环形图、南丁格尔玫瑰图,并能设置切片的大小、颜色、标签、动画效果等。 4. 热力图(Heatmap):...

Global site tag (gtag.js) - Google Analytics