obiee里做echarts图

步骤如下：
1.首先在echarts官网获取他们的样例，然后修改样例成为自己想要的样式，并且运行以便检查代码的可行性
2.复制以下这段成为头
记住修改id（此段代码为"jxd_01")，否则在同一个仪表盘里若id一致的图，只会展示最后一个的样子，并且展示在第一个图里

<html>
<head>
    <meta charset="utf-8">
<title>金销贷_逾期率变化</title>
    <!-- 引入 echarts.js -->
    <script src="/analyticsRes/echarts/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="jxd_yql_01" style="width: 600px;height:360px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChartdayzc = echarts.init(document.getElementById('jxd_01'));
var date=[];
var data1=[];
var data2=[];
var data3=[];

3.复制这段作为中间的代码，数据会是一个个列表的样式，可以给数据起别名，只需要和第三段的数据引用保持一致即可

date.push('@1');
data1.push('@2'.replace(/,/g,''));
data2.push('@3'.replace(/,/g,''));
data3.push('@4'.replace(/,/g,''));

4.复制这段作为最后的代码，这个options就是可以再echarts里面运行的。

var option = {
    title: {
        text: '金销贷_逾期率变化图'
    },
    color:['#bcd693','#7fc2f3','#f3b164','#bcd693'], 
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['中烟', '其他', '合计']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} %'
        }
    },
    series: [
        {
            name: '中烟',
            type: 'line',
            data: data1,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '其他',
            type: 'line',
            data: data2,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '合计',
            type: 'line',
            data: data3,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};

别忘了加最后一段

// 使用刚指定的配置项和数据显示图表。
        myChartdayzc.setOption(option);
    </script>
</body>
</html>

猜你喜欢