数据可视化处理 ECharts

数据可视化常见框架:
1)echarts 工作推荐(百度开源)
2)highcharts
3)D3.js
4)HUE 前三个需要开发
5)Zeppelin 推荐

本次主要使用的是 ECharts 框架开发教程

官网下载

我们需要的是完成的,自己也可以用常用的
数据可视化处理 ECharts_第1张图片

点击打开后是 js 文件
数据可视化处理 ECharts_第2张图片
将文件保存 echarts.min.js
数据可视化处理 ECharts_第3张图片

创建Web项目

使用 IDEA 在 Maven 下创建一个 web 项目
数据可视化处理 ECharts_第4张图片
创建后将刚刚下载的echarts.min.js 保存到文件目录中
数据可视化处理 ECharts_第5张图片

我使用的案例:http://echarts.baidu.com/examples/editor.html?c=pie-simple
手下引入 ECharts,其次绘制图标,代码如下


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts HelloWorldtitle>

    <meta charset="utf-8">
    
    <script src="js/echarts.min.js">script>
head>
<body>

    
    <div id="main" style="width: 600px;height:400px;">div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title : {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} 
{b} : {c} ({d}%)"
}, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
script> body> html>

具体实现的代码内容:https://download.csdn.net/download/qq_1290259791/10301191

你可能感兴趣的:(大数据)