可视化工具（Echarts）入门

时间：2024-02-22 17:53:05

可视化工具

交互式

Tableau、PowerBI、Gephi

配置式(使用json数据对象)

VegaLite、Echarts、Plotly

编程式

Processin、D3.js

OpenGL、WebGL

下文针对Echarts进行描述：

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

点击此处前往官方文档

以柱状图为例，创建一个Echarts图表：

option = {
    title: {
        text: \'ECharts 入门示例\'
    },
    tooltip: {},
    legend: {
        data:[\'销量\']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: \'销量\',
        type: \'bar\',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

所有配置写在option中。

title：存放标题的地方

tooltip：配置属性

legend：图例，默认提供筛选功能

xAxis：X坐标系名称

yAxis：Y坐标系名称

series：指定了数值和数值映射的图表

图表展现

现在已经展现了一个Echarts图标，下一步便是将其展现到一个网页中。

下载Echarts.js

进入下载界面，点击在线定制，选中所需要用到的图标（不知道会用到啥就全都要）

过几分钟等整合结束，便会得到一个echarts.js文件。

在所需的网页中，将JS文件导入。

<script src="js/echarts.js"></script>

引入JS文件以后，设置一个div容器存放Echarts图表，并设置一定的宽高。

<div id="PieChart"></div>

#PieChart{
    height: 400px;
    margin-top: 50px;
}

设置完大小以后，在JS文件中初始化Echarts图表，并且设定一定的option。关于option具体内容的设置可前往Echarts配置项进行查看。

需要注意的是，在初始化获取PieChat对象的时候，需要用JS原生的Dom方法获取对象，而不能用JQuery方法获取。

var PieChart = echarts.init(document.getElementById(\'PieChart\'));
option = {
    title:{
        text:"百分比显示图",
        left:"center"
    },
    tooltip: {
        trigger: \'item\',
        formatter: \'{a} <br/>{b} : {c} ({d}%)\'
    },
    legend:{
        orient:"vertical",
        left:"left",
        data:[\'类型1\',\'类型2\',\'类型3\',\'类型4\',\'类型5\']
    },
    series:{
        name:"数据展示",
        type:"pie",
        radius:"55%",
        center:[\'50%\', \'60%\'],
        data:[
            {value:153,name:\'数据1\'},
            {value:534,name:\'数据2\'},
            {value:4353,name:\'数据3\'},
            {value:1234,name:\'数据4\'},
            {value:843,name:\'数据5\'},
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: \'rgba(0, 0, 0, 0.5)\'
            }
        }
    }
}
userPieChart.setOption(option);

设置完以后，Echarts图表即可以在网页中显示。

相关文章