使用Echarts几分钟制作出折线图、饼图、柱状图等
标签：
JavaScript
ECharts，缩写来自Enterprise Charts。 ECharts，不仅是国内关注度最高的开源项目，还是中国第一个也是目前唯一一个入选了Github Explorer Data Visualization板块的开源项目。
这里咱们结合上篇提到的Bootstrap简单栅格框架，来做一个小小的布局。学以致用嘛。从来不喜欢赘述，直接上代码，一切的解释，请看代码注释：
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.min.js" ></script><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/echarts.js" ></script><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/vintage.js" ></script><!--Echarts主题--><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.js" ></script><!--Bootstrap框架 --><link rel="stylesheet" href="css/bootstrap.css" /><body> <div class="container"> <div class="row"> <div id="pie_photo_id" class="col-md-4" style="height: 300px;"><!--饼图--> </div> <div id="line_photo_id" class="col-md-4" style="height: 300px;"><!-- 折线图--> </div> <div id="bar_photo_id" class="col-md-4" style="height: 300px;"><!-- 柱状图--> </div> </div> </div></body><script> $(document).ready(function(){ /**饼图*/ var myChart = echarts.init(document.getElementById('pie_photo_id'), 'vintage'); /*myChart：为Echart对象 pie_photo_id：显示位置 vintage：图表的主题*/ option = {//Echarts的参数配置 title : {//标题 text: '饼图的标题',//主标题 subtext: '形容词',//fubiaoti x:'center' }, tooltip : {//提示 trigger: 'item',//触发提示的类型：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。 }, legend: {//图例组件。 orient: 'vertical',//图例列表的布局朝向。 left: 'left',//图例组件离容器左侧的距离。 data: ['类型1','类型2','类型3','类型4','类型5'] /** * 图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name * （如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对 * 应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 '' * （空字符串）或者 '\n'（换行字符串）用于图例的换行。 如果 data 没有被指定，会自动从当前系列中获取。 多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。 如 饼图 and 漏斗图 等会取自 series.data 中的 name。 如果要设置单独一项的样式，也可以把该项写成配置项对象。 此时必须使用 name 属性对应表示系列的 name。 */ }, series : [ //系列列表。每个系列通过 type 决定自己的图表类型 { name: '提示信息', type: 'pie', /** * 饼图主要用于表现不同类目的数据在总和中的占比。 * 每个的弧度表示数据数量的比例。 */ radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'类型1'}, {value:310, name:'类型2'}, {value:234, name:'类型3'}, {value:135, name:'类型4'}, {value:1548, name:'类型5'} ], itemStyle: {//图形样式。 emphasis: { shadowBlur: 10,//图形阴影的模糊大小。 shadowOffsetX: 0,//阴影水平方向上的偏移距离。 shadowColor: 'rgba(0, 0, 0, 0.5)' /** * 颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'， * 如果想要加上 alpha 通道表示不透明度，可以使用 RGBA， * 比如 'rgba(128, 128, 128, 0.5)'， * 也可以使用十六进制格式，比如 '#ccc'。 * 除了纯色之外颜色也支持渐变色和纹理填充 */ } } } ] }; myChart.setOption(option); }) /**折线图*/ var lineChart = echarts.init(document.getElementById('line_photo_id'), 'vintage'); option = { title: { text: '某某消费情况分布', subtext: '副标题' }, tooltip: { trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 axisPointer: {//坐标轴指示器配置项。 type: 'cross' } }, toolbox: {//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。 show: true,//是否显示工具栏 feature: { saveAsImage: {}//保存为图片 } }, xAxis: { /**直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴， * 多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。 */ type: 'category',// 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 boundaryGap: false,//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。 data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'] /**类目数据，在类目轴（type: 'category'）中有效。 */ }, yAxis: { /**直角坐标系 grid 中的 y 轴，一般情况下单个 grid * 组件最多只能放左右两个 y 轴，多于两个 y 轴 * 需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。 */ type: 'value',//坐标轴类型。数值轴，适用于连续数据。 axisLabel: {//坐标轴刻度标签的相关设置。 formatter: '{value} W'//刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 }, axisPointer: {//折叠详情 snap: true//坐标轴指示器是否自动吸附到点上。默认自动判断。 } }, visualMap: {//视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。 show: false, dimension: 0, pieces: [{ lte: 6, color: 'green' }, { gt: 6, lte: 8, color: 'red' }, { gt: 8, lte: 14, color: 'green' }, { gt: 14, lte: 17, color: 'red' }, { gt: 17, color: 'green' }] }, series: [ /**折线图是用折线将各个数据点标志连接起来的图表， * 用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。 */ { name:'消费指数', type:'line', smooth: true,//是否平滑曲线显示。 data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400], markArea: {//图表标域，常用于标记图表中某个范围的数据 data: [ [{ name: '春季', xAxis: '07:30' }, { xAxis: '10:00' }], [{ name: '秋季', xAxis: '17:30' }, { xAxis: '21:15' }] ] } } ] }; lineChart.setOption(option); /**柱状图*/ var barChart = echarts.init(document.getElementById('bar_photo_id'), 'vintage'); option = { title: { text: '主标题', subtext: '副标题' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['2017年', '2018年'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { type: 'category', data: ['y轴1','y轴2','y轴3','y轴4','y轴5','单位'] }, series: [ { name: '2017年', type: 'bar', data: [18203, 23489, 29034, 104970, 131744, 630230] }, { name: '2018年', type: 'bar', data: [19325, 23438, 31000, 121594, 134141, 681807] } ] }; barChart.setOption(option);</script>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦