[H5] echarts绘制条形统计图
表格需要引入echarts.js：
/dist/echarts.min.js
效果图如下：
引入结构：
实例化： echarts.init(document.getElementById(‘main’))option：设置指定图表的配置项和数据setOption(option)： 将表显示到页面上代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>条形表</title></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><!-- 引入图表样式需要的js文件echarts --><script src="/dist/echarts.min.js"></script><script>// 1.基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 2.指定图表的配置项和数据 放在option对象里面var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 3.使用刚指定的配置项和数据 显示图表(将表显示到页面上)。myChart.setOption(option);</script></body></html>
下面是饼状图效果：
饼状图代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>饼图</title></head><body><div id="main" style="width: 1000px;height:500px;"></div><script src="/dist/echarts.min.js"></script><script>// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据 放在option对象里面var option = {title: {text: '南丁格尔玫瑰图',subtext: '纯属虚构',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {x: 'center',y: 'bottom',data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']},toolbox: {show: true,feature: {mark: {show: true },dataView: {show: true, readOnly: false },magicType: {show: true,type: ['pie', 'funnel']},restore: {show: true },saveAsImage: {show: true }}},calculable: true,series: [{name: '半径模式',type: 'pie',radius: [20, 110],center: ['25%', '50%'],roseType: 'radius',label: {normal: {show: false},emphasis: {show: true}},lableLine: {normal: {show: false},emphasis: {show: true}},data: [{value: 10, name: 'rose1' },{value: 5, name: 'rose2' },{value: 15, name: 'rose3' },{value: 25, name: 'rose4' },{value: 20, name: 'rose5' },{value: 35, name: 'rose6' },{value: 30, name: 'rose7' },{value: 40, name: 'rose8' }]},{name: '面积模式',type: 'pie',radius: [30, 110],center: ['75%', '50%'],roseType: 'area',data: [{value: 10, name: 'rose1' },{value: 5, name: 'rose2' },{value: 15, name: 'rose3' },{value: 25, name: 'rose4' },{value: 20, name: 'rose5' },{value: 35, name: 'rose6' },{value: 30, name: 'rose7' },{value: 40, name: 'rose8' }]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body></html>
