使用Echarts几分钟制作出折线图,饼图,柱状图等

  

ECharts,缩写来自企业图表。ECharts,不仅是国内关注度最高的开源项目,还是中国第一个也是目前唯一一个入选了Github Explorer数据可视化板块的开源项目。
这里咱们结合上篇提到的引导简单栅格框架,来做一个小小的布局。学以致用嘛。从来不喜欢赘述,直接上代码,一切的解释,请看代码注释:

  
 <代码> & lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery.min.js "祝辞& lt;/script>
  & lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/echarts.js "祝辞& lt;/script>
  & lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/vintage.js "祝辞& lt;/script> & lt; !——Echarts主题——比;
  & lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/bootstrap.js "祝辞& lt;/script> & lt; !——引导框架——比;
  & lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/bootstrap.css "/比;
  & lt; body>
  & lt; div类="容器"比;
  & lt; div类="行"比;
  & lt; div id=皃ie_photo_id”class=癱ol-md-4”祝辞& lt; !——饼图——比;
  & lt;/div>
  & lt; div id=發ine_photo_id”class=癱ol-md-4”祝辞& lt; !——折线图——比;
  & lt;/div>
  & lt; div id=癰ar_photo_id”class=癱ol-md-4”祝辞& lt; !——柱状图——比;
  & lt;/div>
  & lt;/div>
  & lt;/div>
  & lt;/body>
  & lt; script>
  $(文档)时函数(){/* *饼图*/var myChart=echarts.init (. getelementbyid (“pie_photo_id”),“复古”);/* myChart:为Echart对象
  pie_photo_id:显示位置
  年份:图表的主题*/选择={//Echarts的参数配置
  标题:{//标题
  文本:“饼图的标题',//主标题
  潜台词:“形容词',//fubiaoti
  谢:“中心”
  },
  提示:{//提示
  触发:“项”,//触发提示的类型:数据项图形触发,主要在散点图、饼图等无类目轴的图表中使用。
  格式化程序:“{}& lt; br/祝辞{b}: {c} ({d} %)”//提示框浮层内容格式器,支持字符串模板和回调函数两种形式。
  },
  传说:{//图例组件。
  东方:“垂直”,//图例列表的布局朝向。
  左:“左”,//图例组件离容器左侧的距离。
  数据:['类1型”、“类型2 ','类型3 ','类型4 ','类型5 ')/* *
  *图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的名称
  *(如果是饼图,也可以是饼图单个数据的名字)。图例组件会自动根据对
  *应系列的图形标记(符号)来绘制自己的颜色和标记,特殊字符串”
  *(空字符串)或者“\ n”(换行字符串)用于图例的换行。
  如果数据没有被指定,会自动从当前系列中获取。
  多数系列会取自series.name或者系列。编码的seriesName所指定的维度。
  如饼图和漏斗图等会取自系列。中数据的名称。
  如果要设置单独一项的样式,也可以把该项写成配置项对象。
  此时必须使用名字属性对应表示系列的名称。
  */},
  系列:[//系列列表。每个系列通过类型决定自己的图表类型
  {
  名称:“提示信息”,
  类型:“派”,/* *
  *饼图主要用于表现不同类目的数据在总和中的占比。
  *每个的弧度表示数据数量的比例。
  */半径:“55%”,
  中心:“50%”,“60%”,
  数据:[
  {值:335年,名字:“类型1 '},
  {值:310年,名字:“类型2 '},
  {值:234年,名字:“类型3 '},
  {值:135年,名字:“类”型4},
  {值:1548年,名字:“类型5 '}
  ),
  itemStyle:{//图形样式。
  重点:{//shadowBlur: 10日图形阴影的模糊大小。
  shadowOffsetX: 0,//阴影水平方向上的偏移距离。
  shadowColor:“rgba (0, 0, 0, 0.5)/* *
  *颜色可以使用RGB表示,比如“RGB (128、128、128)”,
  *如果想要加上α通道表示不透明度,可以使用RGBA,
  *比如“rgba (128、128、128、0.5),
  *也可以使用十六进制格式,比如# ccc。
  *除了纯色之外颜色也支持渐变色和纹理填充
  */}
  }
  }
  ]
  };
  myChart.setOption(选项);
  })/* *折线图*/var lineChart=echarts.init (. getelementbyid (“line_photo_id”),“复古”);
  选择={
  标题:{
  文本:“某某消费情况分布的,
  潜台词:“副标题”
  },
  提示:{
  触发:“轴”,//坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
  axisPointer:{//坐标轴指示器配置项。
  类型:“十字架”
  }
  },
  工具箱:{//工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
  显示:真的,//是否显示工具栏
  特点:{
  saveAsImage:{}//保存为图片
  }
  },
  xAxis: {/* *直角坐标系网格中的x轴,一般情况下单个网格组件最多只能放上下两个x轴,
  *多于两个x轴需要通过配置抵消属性防止同个位置多个x轴的重叠。
  */类型:“类别”,//类目轴,适用于离散的类目数据,为该类型时必须通过数据设置类目数据。
  boundaryGap:假的,//坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
  数据:[‘0’,‘01:15’,‘02:30’,‘03:45’,‘凌晨’,‘06:15’,‘07:30时’,
  时间为,“10”,“15”,“12:30”,“一点”,“维基”,已经售完,
  “下午”、“18:45’,‘20:00’,‘21:15’,‘22:30’,‘23:45)/* *类目数据,在类目轴(类型:“类别”)中有效。
  */},
  桠溪:{/* *直角坐标系网格中的y轴,一般情况下单个网格
  *组件最多只能放左右两个y轴,多于两个y轴
  *需要通过配置抵消属性防止同个位置多个Y轴的重叠。
  */类型:“价值”,//坐标轴类型。数值轴,适用于连续数据。
  axisLabel:{//坐标轴刻度标签的相关设置。
  格式化程序:“{value} W”//刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
  },
  axisPointer:{//折叠详情
  快速:真//坐标轴指示器是否自动吸附到点上。默认自动判断。
  }
  },
  visualMap:{//视觉映射组件,用于进行“视觉编码”,也就是将数据映射到视觉元素(视觉通道)。
  显示:假的,
  维度:0,
  件:[{
  lte: 6,
  颜色:“绿色”
  },{
  gt: 6,
  lte: 8
  颜色:红色的
  },{
  gt: 8
  lte: 14,
  颜色:“绿色”
  },{
  gt: 14,
  lte: 17,
  颜色:红色的
  },{
  gt: 17,
  颜色:“绿色”
  })
  },
  系列:[/* *折线图是用折线将各个数据点标志连接起来的图,表
  *用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。
  */{
  名称:“消费指数”,
  类型:“行”,
  平滑:真的,//是否平滑曲线显示。
  数据:(300,280,250,260,270,300,550,500,400,390,
  380,390,400,500,600,750,800,700,600,400),
  markArea:{//图表标域,常用于标记图表中某个范围的数据
  数据:[[{
  名称:“春季”,
  xAxis:“07:30时”
  },{
  xAxis:‘10’
  }]、[{
  名称:“秋季”,
  xAxis:“下午”
  },{
  xAxis:“21:15”
  }]]
  }
  }
  ]
  };
  lineChart.setOption(选项);/* *柱状图*/var柱形图表=echarts.init (. getelementbyid (“bar_photo_id”),“复古”);
  选择={
  标题:{
  文本:“主标题”,
  潜台词:“副标题”
  },
  提示:{
  触发:“轴”,
  axisPointer: {
  类型:“影子”
  }
  },
  传说:{
  数据:[‘2017年’,‘2018年’)
  },
  网格:{
  左:“3%”,
  右:“4%”,
  底:“3%”,
  containLabel:真
  },
  xAxis: {
  类型:“价值”,
  boundaryGap (0, 0.01):
  },
  桠溪:{
  类型:“类别”,
  数据:[y轴1,y轴2,y轴3,‘y轴4’,‘y轴5’,‘单位”)
  },
  系列:[
  {
  名称:“2017年”,
  类型:“酒吧”,
  数据:[18203、23489、29034、104970、131744、630230]
  },
  {
  名称:“2018年”,
  类型:“酒吧”,
  数据:[19325、23438、31000、121594、134141、681807]
  }
  ]
  };
  barChart.setOption(选项);
  & lt;/script> 

使用Echarts几分钟制作出折线图,饼图,柱状图等