Echarts（一）

最新推荐文章于 2024-06-06 11:39:14 发布

NI3E

最新推荐文章于 2024-06-06 11:39:14 发布

阅读量417

点赞数

分类专栏：关于数据可视化文章标签： echarts 数据可视化

本文链接：https://blog.csdn.net/m0_51588059/article/details/117360813

版权

关于数据可视化专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Echarts图形库，一款基于HTML5的图形库，引用Javascript形的创建图形。开源的数据可视化工具。

优点：1这个库是百度的项目，一直有更新；2项目文档比较详细，而且是中文的，也很详细；3支持的图形丰富，使用方便，容易上手；4动态数据的动画展示；5更多更强大的三维可视化……。

Echarts官网。

如何运行

法一：

1.下载echarts.js。Echarts仅仅是一个JS的插件。需要要依赖于这个js库。

备注：下载方法。我使用第一种方法失败，参考其他人资料，选择最后的“方法三在线定制”，得到echarts.js。（如果下载时选择压缩代码得到“echarts.min.js”）。

2.写HTML文件：

首先准备一个有大小的DOM文件，生成的图表会放在这里。

其次初始化Echarts实例对象。

然后指定配置项和参数。

最后需要把配置项设置给echarts实例对象。使用var声明的只是单独的对象chart和option，需要将两个“配对”配置给一起。

其中，前三步和最后一步的语法基本固定，重点是第四步配置项和参数。

3.将得到的HTML文件和echarts.js放相同目录下，使用浏览器运行HTML文件，得到图表。

法二：

打开官网，点击任意示例，进入，修改官方的左侧的代码为自己的代码，就可以在线展示效果。

利用官网在线在线运行，方便检查错误。

基本的大框架都是不变的，只是option在变。一般在线调试好option之后添加到已有框架。

基础配置

这部分仅仅简单介绍一些配置。

可以在官网文档：配置项手册里面找到详细内容。（而且是中文的，很方便。）

可以添加、删除例子里面的语句，查看效果，更加直观的感受到运行效果。

标题title

·text：主标题

·subtext：副标题

·left：距离左侧的位置。属性值可以是①像素值②相对于容器的百分比③left、center、right

·show：默认是true

提示框tooltip

·trigger：触发类型。item图像，axis坐标轴，none。

·formatter：提示框内容格式器。（※）这部分结合具体实例分析。

·axisPointer：配置项以type为子参数，设置指示器类型。line、shadow、cross、none。

工具栏toolbox

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置工具。

·feature：（※）这部分结合具体实例分析。

图例legend

·data：图例中的数据，和数据系列一一对应。

·left：同上，位置。

·top：控制位置，图表距离容器顶部的距离。

·orient：布局朝向。默认水平，也可以改为竖直vertical。

时间轴timeline

提供了在多个 ECharts option 间进行切换、播放等操作的功能。（※）

坐标轴xAxis和yAxis

position：指定位置。X：top和bottom，Y：left和right。

type：指定数据类型。

name：名称。

nameLocation：名字显示位置。start、middle/center、end。

数据系列series

series是一个数组结构，使用中括号，内部用大括号区分内部的多组数据。大括号内部类似“字典”，采用“key：value”的结构。

实例：

series: [{
        data: [450, 232, 301, 734, 1090, 830, 500],
        type: 'line',
        smooth: true
    }]

基本框架

<!DOCTYPE html>
<html>
<head>
    <meta charsct='utf-8'>
    <!--引入Echarts-->
    <script src="echarts.js"></script>
</head>

<body>
    <!--为Echarts准备一个具备大小（宽高）的DOM-->
    <div id="main"style="width:600px;height:400px;"></div>
    <script type="text/javascript"></script>
        //基于准备好的DOM,初始化
        var mychart=echarts.init(document.getElementByID('main'));
        指定图表的配置项和数据
        var option={
            //title
            //toopltip
            //legend
            //xAxis:{
            //}
            //yAxis:{
            //}
            //series:[{},{}]
            //options=[]
        };
        //使用刚指定的配置项和数据显示图表。
        myChart.sepOption(option);
    </script>
</body>
</html>

“我们沉浸在数据的海洋里，却渴望知识的淡水。”