菜鸟怎么在页面的div里引入echarts图标

首先说明本人用的是echarts3版本

 在jsp上来里面需要引入：

<script src="plugins/echarts/echarts.min.js"></script>
<script type="text/javascript" src="js/showChart.js"></scrip

 <script src="plugins/htmb/vendor/jquery/jquery.min.js"></script>

以上就是下面我们所要展示的效果 接下来言归正传，直插主题

打开eclipse 创建一个js,名字可以随便起，我这里就为showCharts.js  直接上代码

var chartOutChar = null;

var option1 = {
         tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x : 'center',
                y : 'bottom',
                data:['新闻','论坛','微信','微博','博客','贴吧','问答','财经网站','传统纸媒']
            },
            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 : [30, 110],
                    center : ['50%', '50%'],
                    roseType : 'area',
                    data:[
                        {value:10, name:'新闻'},
                        {value:40, name:'论坛'},
                        {value:15, name:'微信'},
                        {value:25, name:'微博'},
                        {value:20, name:'博客'},
                        {value:35, name:'贴吧'},
                        {value:30, name:'问答'},
                        {value:37, name:'财经网站'},
                        {value:28, name:'传统纸媒'}
                    ]
                }
            ]
        };






//载入图表
$(function () {
    chartOutChar = echarts.init(document.getElementById('showChart'));
    chartOutChar.setOption(option1);
  
});

接下来就是我们的jsp 页面了，废话少说，也是直接怼代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="plugins/echarts/echarts.min.js"></script>
<script type="text/javascript" src="js/showChart.js"></script>
<title>数据可视化测试</title>
</head>

<body>
    <div class="bg-light lter b-b wrapper-md ng-scope">
        <h3
            style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; color: #555; font-weight: 400; font-size: 20px;">舆情监测</h3>
    </div>
    <h3 class="page-title">
        Echarts 展示 <small>可视化图表</small>
    </h3>
    </div>

    <div class="row">
        <div class="col-lg-6 col-sm-12 col-xs-12 col-sm-12">
            <div id="showChart"
                style="width: 100%; height: 600px; margin-left: 0px; margin-right: 6px; margin-bottom: 8px; float: left; overflow: hidden;"></div>
        </div>

    </div>


</body>
</html>

这时打开页面效果就出来了！！

posted @ 2017-06-14 11:01  迷踪步  阅读(4964)  评论(4)  编辑  收藏  举报