【转载】一个强大的报表组件echarts

时间：2021-05-26 11:42:08

 

http://echarts.baidu.com/examples.html

如何使用ECharts?

1.下载echarts.js

2.引入echarts.js

<script type="text/javascript" src="../../plugin/echarts/echarts.js"></script>

3.定义div区域

<div id="ec1" style="width: 100%;height:400px;"></div> <div id="ec2" style="width: 100%;height:400px;"></div>

4.初始化并关联区域

// 基于准备好的dom，初始化echarts实例
var myEc1 = echarts.init(document.getElementById('ec1'));

5.配置数据与参数

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

6.填充区域

// 使用刚指定的配置项和数据显示图表。
myEc1.setOption(option);

tips:这里最核心的就是option这个参数了，配置不同的option，就会显示不同的图表内容。

完整案例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"> <title>echarts测试</title> </head> <body style="overflow: hidden;"> <header class="aui-bar aui-bar-nav"> echarts测试 </header> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="ec1" style="width: 100%;height:400px;"></div> <div id="ec2" style="width: 100%;height:400px;"></div> <script type="text/javascript" src="../../plugin/echarts/echarts.js"></script> <script> // 基于准备好的dom，初始化echarts实例 var myEc1 = echarts.init(document.getElementById('ec1')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myEc1.setOption(option); var myEc2 = echarts.init(document.getElementById('ec2')); option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'line' // 默认为直线，可选为：'line' | 'shadow' } }, // label:{ // normal:{ // show: true, // position: 'inside'} // }, legend: { data:['直接粉丝','间接粉丝'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['一月','二月','三月','四月','五月','六月','七月'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'直接粉丝', type:'bar', data:[320, 332, 301, 334, 390, 330, 320] }, { name:'间接粉丝', type:'bar', stack: '广告', data:[150, 232, 201, 154, 190, 330, 410] } ] }; myEc2.setOption(option); </script> </body> </html>
标签：

相关文章