菜鳥怎麼在頁面的div裏引入echarts圖標

時間 2019-12-14

標籤菜鳥怎麼頁面 div 引入 echarts 圖標欄目 CSS 简体版

原文原文鏈接

首先說明本人用的是echarts3版本javascript

在jsp上來裏面須要引入：html

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

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

以上就是下面咱們所要展現的效果接下來言歸正傳，直插主題微信

打開eclipse 建立一個js,名字能夠隨便起，我這裏就爲showCharts.js 直接上代碼app

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 頁面了，廢話少說，也是直接懟代碼echarts

<%@ 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>