1.效果展示:
代码:
var myChart = echarts.init(document.getElementById('temperature_tiaox')); var option = { title : { text : '耗电量柱形图表', subtext:'纯属虚构' }, // 鼠标放在条形上,得到提示信息 tooltip : { trigger : 'axis' }, legend : { data : ['机器1','机器2','机器3',] }, toolbox : { show : true, }, xAxis : { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] }, yAxis : { type : 'value', name : '单位:(kWh)' }, series : [ { name : '机器1', type : 'bar', data : ['80','100','60','10','80','100','90','60','100','40','10','80'], itemStyle: {normal: {color:'#0687C0'}} },{ name : '机器2', type : 'bar', data : ['60','50','40','10','80','100','50','60','30','40','10','80'], itemStyle: {normal: {color:'#C23531'}} },{ name : '机器3', type : 'bar', data : ['10','20','40','10','80','100','50','60','60','40','70','80'], itemStyle: {normal: {color:'#314656'}} } ] }; // 为echarts对象加载数据 myChart.setOption(option);
注意事项:这里案例是最基础,但是里面还是有一个知识点来的,就是在使用echarts.js的时候一定要配置xAxis,yAxis,series这三个参数,如果是不想设置的话也要初始化可以将其设置为空JSON就可以了,要不然会出项报错,同时要保证在echarts.init之前的对象是有宽高的,要不然也会出现错误
2.效果图:
在讲解这个案例之前,首先我们来假设一个命题,假设要统计一个超市上半年的进货金额和一周的销售金额,其中的进货金额用柱状图表示,销售金额用折线图表示,然后还要标出半年中最大值和最小值,同时还要求出销售和进货的平均数,进货金额分别是[200,312,431,241,175,275,369],销售金额[321,432,543,376,286,298,400]
代码:
var myChart = echarts.init(document.getElementById('temperature_tiaox')); var option = { title : { text : '超市账单图表' }, // 鼠标放在条形上,得到提示信息 tooltip : { trigger : 'axis' }, legend : { data : ['进货金额','销售金额',] }, toolbox : { show : true, }, xAxis : { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月'] }, yAxis : { type : 'value', name : '万元' }, series:[{ name:'进货金额', type:'bar', data:[200,312,431,241,175,275,369], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine:{ data:[ {type:'average',name:'平均值',itemStyle:{ normal:{ color:'green' } }} ] } },{ name:'销售金额', type:'line', data:[321,432,543,376,286,298,400], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine:{ data:[ {type:'average',name:'平均值',itemStyle:{ normal:{ color:'blue' } }} ] } }] }; // 为echarts对象加载数据 myChart.setOption(option);
3.效果展示:
option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'访问来源', type:'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] };