echarts图表应用

1，echarts简介
JavaScript的图表库
百度捐给apache基金会
比较符合中国人习惯
HeightCharts , D3为同行
2，几个常用的图表类型type：
type:"bar"柱状图
type:"line"折线图
type:"pie"饼图
3，实际案例

页面效果

还可以在同一个容器或创建的实例中放入多个图表,
页面效果

改一下图表的颜色
变成粉色
同样我们也可以修改鼠标经过时的高亮
【echarts图表应用】{type: "bar",data: [90, {value:60,itemStyle:{color:"#ffd7d7"}}, 30, 87, 99],name: "成绩",itemStyle:{normal:{color:"#795eff"},emphasis:{color:"#f55"}} 效果如图

再接下来做一个特殊渐变效果的柱状图
先做一个渐变效果
var mycolor2 = {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(0, 85, 255, 0.7)' // 0% 处的颜色}, {offset: .7,color: 'rgba(29, 249, 231, 0)' // 100% 处的颜色}],global: false // 缺省为 false} 做圆角
{name: "柱状",type: "bar",data: [120, 200, 240, 180, 80],itemStyle: {borderRadius: [100, 100, 100, 100],color: mycolor1}} 效果图如下

最后再做一个堆叠图
页面内效果

同时 echarts还支持自定义主题：https://echarts.apache.org/zh/theme-builder.html

可自己定制喜欢的主题，然后下载导入就可以了