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)
});
}
};
}
相关推荐
- 饼图(pie):用于表示部分与整体的关系。 - 散点图(scatter):可以展示数据的分布情况。 - 地图(map):用于地理数据的可视化。 - K 线图(candlestick):常用于金融市场的数据分析。 - 雷达图(radar)...
6. **图表类型**:ECharts 支持多种图表类型,如柱状图(bar)、折线图(line)、饼图(pie)、地图(map)等,每种图表都有自己的特性和应用场景。例如,柱状图适合比较不同类别的数值,折线图则适合展示数据随时间...
- **图表类型**:ECharts支持多种图表,如line(折线图)、bar(柱状图)、scatter(散点图)、pie(饼图)、map(地图)等,可以根据数据类型和展示需求选择合适的图表。 - **数据加载**:ECharts可以通过JSON、...
- **饼图(pie)**:表示部分与整体的关系。 - **散点图(scatter)**:用于二维空间中展示数据分布。 - **地图(map)**:结合地理信息,展示地域数据差异。 - **仪表盘(gauge)**:模拟物理仪表,展示单一...
- **图表**:ECharts 提供了多种图表类型,如 bar(柱状图)、line(折线图)、pie(饼图)、scatter(散点图)等。每个图表类型都有对应的配置项和方法,通过源码可以理解其内部绘制逻辑和数据处理过程。 - **...
1. **基础图表类型**:ECharts 支持多种基本图表,包括柱状图(bar)、折线图(line)、饼图(pie)、散点图(scatter)和地图(map)。这些图表可用于显示不同种类的数据,如数量对比、趋势分析、占比等。 2. **多...
3. **饼图(Pie Chart)**: 饼图将数据以扇形划分,用于显示各部分占总体的比例。ECharts允许自定义扇区颜色、添加标签、设置渐变色、动画效果,以及使用南丁格尔玫瑰图等。 4. **雷达图(Radar Chart)**: ...
<IEcharts :option="pie" @ready="onReady" @click="onClick"></IEcharts> import IEcharts from 'vue-echarts-v3/src/lite.js'; import 'echarts/lib/component/title'; import 'echarts/lib/component/...
6. **3D饼图(Pie3D)**:展示部分占总体的比例关系。 **3D图表的配置与属性** 在ECharts GL中,创建3D图表需要设置一系列的配置项。这些配置项包括但不限于: - `series-type`:指定图表类型,如`'bar3D'`或`'...
- **图表类型**:熟悉ECharts提供的所有图表类型,如line(折线图)、bar(柱状图)、scatter(散点图)、pie(饼图)等。 - **数据动态更新**:学习如何动态地更新图表数据,实现数据实时刷新。 - **交互功能**:...
ECharts 2.2.7 是一个开源的、基于 JavaScript 的数据可视化库,它由百度公司开发并维护。这个版本的 ECharts 提供了丰富的图表类型,包括柱状图、折线图、饼图、散点图等,适用于各种数据分析和展示需求。"有静态...
Echarts 是一个由百度开发的开源数据可视化库,它提供了丰富的图表类型,如柱状图、饼图、线图、地图等,适用于各种 Web 数据展示需求。本压缩包 "echarts-demo.rar" 内含一系列 Echarts 示例页面,以及相关的 CSS ...
2. **图表类型**:ECharts 支持多种图表类型,包括但不限于折线图(line)、柱状图(bar)、饼图(pie)、散点图(scatter)、地图(map)等,满足不同场景的数据展示需求。 3. **交互性**:ECharts 提供丰富的交互...
例如,`src/chart`目录下有各种图表(如line、bar、pie等)的实现,而`src/component`则包含了坐标轴、图例、工具提示等基础组件。 2. **测试html**: 压缩包中的测试html文件用于验证ECharts的功能和性能,它们...
- 饼图(pie):展示部分与整体的比例关系。 - 散点图(scatter):用于显示两个或更多变量之间的关系。 - 地图(map):结合地理数据,展示地域间的数值差异。 3. **交互功能**:ECharts 支持多种交互操作,如...
1. **多样的图表类型**:ECharts 支持多种图表,包括但不限于条形图(bar)、折线图(line)、饼图(pie)、环形图(ring)、散点图(scatter)和K线图(candlestick),以及组合图表和自定义图表,满足各种数据分析...
3. 饼图(Pie Chart):饼图用于表示整体与部分之间的比例关系,每个扇区代表一个部分的占比。ECharts的饼图支持环形图、南丁格尔玫瑰图,并能设置切片的大小、颜色、标签、动画效果等。 4. 热力图(Heatmap):...