如何使用echarts

echarts定义核心概览图标常用类型颜色的修改特别样式数据的堆叠创建一个简单的柱状图

echarts

定义

javascript的图表的库百度捐给apache基金会比较符合中国人习惯HeiCharts.D3为同行

官网：/zh/index.html

核心概览

instance实例series 系列tooltip 提示legend 图例xAxis x轴yAxis y轴toolbox 工具箱dataZoom 缩放vitualMap 虚拟映射

图标常用类型

bar 柱状pie饼形

radius：[“60%”,“40%”]line线形

areaStyle 面

smooth:true 平滑

颜色的修改

主题：自定义主题

light，dark 浅色和深色自定义主题

/zh/theme-builder.htmlcolor:调色盘color系列调色盘itemStyle

默认 normal

强调状态 emphasis

特别样式

渐变

var mycolor = {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'aqua' // 0% 处的颜色}, {offset: 1, color: 'rgba(10, 50, 128, 1)' // 100% 处的颜色}],global: false // 缺省为 false}

线的样式（lineStyle）

lineStyle:{width:12,cap:"round",opacity:0.7,},

3.面的样式

areaStyle:{color:linear2,}

数据的堆叠

stack:true

创建一个简单的柱状图

现在来创建一个简单的柱状图

<script>// 初始化echart实例var echart = echarts.init(document.getElementById("container"))//定义选项var option = {//标题title:{text:"前端大讲堂数据"},//鼠标提示tooltip:{},//图示legend:{data:["人数","人气","年龄分布"]},// x轴线xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},//y轴线yAxis:{},//系列数据series:[//名称，类型：柱状图，数据data{name:"人数",type:"bar",data:[1000,800,500,900,1300]},// areaStyle:{color:"#55ffff"},面积区域{name:"人气",type:"line",smooth:true,data:[200,600,300,770,900]},{name:"年龄分布",type:"pie",radius:["20%","10%"],left:"-50%",top:"-50%",data:[{name:"少年",value:20},{name:"青年",value:50},{name:"中年",value:30},{name:"老年",value:8},]}]}//设置参数echart.setOption(option)</script>

接下来看看效果图