目前优秀的图表库非常多，比如eCharts、highChart等，但大多都是适合静态的数据展示，当面对需要持续更新数据的场景(比如监控数据、数据投屏面板)，大多采用重绘的方式，容易造成卡顿。开发dc的目的就是为了应对这种场景，使数据的切换更加的平滑、流畅。
npm install xzs-chart
初始化饼图。
dom可以为querySelector，也可以是原生dom对象。width为图表宽度，默认400。height为图表高度，默认400。
更新数据。
data- 形式为[{title:'数据1',data:100}]，title作为饼图的文本，并为数据的key，data是展示的数据
import chart from 'xzs-chart'
var update = chart.createCircle('#content',500,500)
update([
{title:"数据1数据1",data:100},
{title:"数据2",data:200},
{title:"数据3",data:300},
{title:"数据4",data:400},
{title:"数据5",data:250},
{title:"数据6",data:300}
])
window.setTimeout(()=>{
update([
{title:"数据1",data:150},
{title:"数据2",data:660},
{title:"数据3",data:300},
{title:"数据4",data:460},
{title:"数据5",data:150},
{title:'数据6',data:300},
{title:'数据7',data:500}
])
},2000)
window.setTimeout(()=>{
update([
{title:"数据1",data:150},
{title:"数据2",data:660},
{title:"数据3",data:300},
{title:"数据4",data:460},
{title:"数据5",data:150}
])
},4000)
初始化仪表盘
content-dom可以为querySelector，也可以是原生dom对象。width: 图表宽度，默认400。height: 图表长度，默认400。maxNum: 最大值，默认100。unit: 数据单位，默认%。title: 图表的标题。during: 切换动画的持续时间
num- 更新的数据
import chart from 'xzs-chart'
var maxNum = 100
var update = chart.createDashBoard('#content',400,400,maxNum)
window.setInterval(()=>{
update(parseInt(Math.random()*maxNum))
},2000)
初始化柱状图
content-dom可以为querySelector，也可以是原生dom对象。width: 图表宽度，默认400。height: 图表长度，默认400。maxNum: 最大值，默认100。during: 切换动画的持续时间
arr- 形式为[{title:'数据1',data:100}]，title作为饼图的文本，并为数据的key，arr是展示的数据
import chart from 'xzs-chart'
var update = chart.createColumnar('#content',800,500)
var d = [
{title:"数据1",data:100},
{title:"数据2",data:200},
{title:"数据3",data:300},
{title:"数据4",data:400},
{title:"数据5",data:250},
{title:"数据6",data:300}
]
var i = 6
var maxNum = 3000
window.setInterval(()=>{
d.shift()
d.push({title:`数据${i++}`,data:(maxNum*Math.random()).toFixed(2)})
update(d)
},4000)