<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="height: 400px;">
</div>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
var myCharts = echarts.init(document.getElementById("main"));
var idx = 1;
option = {
timeline : {
data : [
'2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01',
{ name:'2013-06-01', symbol:'emptyStar6', symbolSize:8 },
'2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01',
{ name:'2013-12-01', symbol:'star6', symbolSize:8 }
],
label : {
formatter : function(s) {
console.log(s)
return s.slice(0, 7);
}
},
autoPlay : true,
playInterval : 1000
},
options : [
{
title : {
text: '浏览器占比变化',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
data:['Chrome','Firefox','Safari','IE9+','IE8-']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
echarts 模拟时间动态
最新推荐文章于 2024-08-31 14:34:59 发布
这篇博客展示了如何利用Echarts库构建一个模拟时间动态的饼图,通过时间轴展示不同时间段内各浏览器(如Chrome、Firefox、Safari等)的占比变化情况。时间轴自动播放,为数据可视化提供了生动的交互体验。
摘要由CSDN通过智能技术生成