大数据可视化技术-echarts01

最新推荐文章于 2024-09-05 00:31:38 发布

@从心

最新推荐文章于 2024-09-05 00:31:38 发布

阅读量965

点赞数

分类专栏：大数据可视化

本文链接：https://blog.csdn.net/qq_45786520/article/details/118251960

版权

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

5 篇文章 1 订阅

订阅专栏

echarts是百度公司开发的一个开源的数据可视化工具，是一个使用JavaScript实现的开源的可视化库，可以流畅地运行在计算机和移动设备上，并能兼容绝大部分浏览器。在功能上，ECharts可以提供更直观，交互丰富、可高度个性化定制的数据可视化图表；在使用上，ECharts为开发者提供了炫酷的图形界面，提供了包括柱状图、折线图、饼图、气泡图等在内的一系列可视化图表。而且ECharts的使用简单，开发者只需要从官网上下载echarts.min.js文件，然后引用在网页上展示即可。

ECharts可视化步骤

（1）导入echarts.min.js包
需在head标签内引入js文件，我们需要通过script标签中的scr属性来给外部脚本文件规定一个路径

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

（2）为ECharts准备一个具备大小（宽高）的容器
我们需要准备一个呈现图表的盒子，通常我们是在div标签内规定一个区域来呈现图表。

<div id="main" style="width: 600px;height:400px;"></div>

（3）基于准备好的dom，初始化echarts实例，实例化
在script标签内，通过echarts.init的方法实例化echarts对象，使用init中的document.getElementById的方法将实例化的对象呈现在步骤2规定的容器内，上述方法需要div标签的id。还可以用document.querySelector获取页面中的div元素，该方法不需要有div标签的id值。用var定义一个变量名来命名此实例对象。

var myChart = echarts.init(document.getElementById('main'));

（4）设置配置项，每个表的配置项不一样
Echarts呈现的效果主要由该部分决定。用var定义一个变量名来命名此配置项。详情可见https://echarts.apache.org/zh/option.html#xAxis.type

var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        //提示框
        tooltip: {},
        //图例
        legend: {
            data:['销量']
        },
        xAxis: {  /* x轴 */
            data: xdata
        },
        yAxis: {},

        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

（5）使用刚指定的配置项和数据显示图表。
通过setOption方法将刚才配置项设置给实例对象。

myChart.setOption(option);

常见配置项

1、折线图常见效果

图标类型：在series下设置 type:‘line’
标记：最大值、最小值、平均值、标记区间
markPoint、markLine、markArea
线条控制：平滑（smooth）、风格（lineStyle）
填充风格：areaStyle
紧挨边缘：boundaryGap
缩放：Scale
堆叠图：stack

2、散点图常见效果

X轴数据与Y轴数据：二维数组
图标类型：
在series下设置 type:‘scatter’
xAxis和yAxis的type都要设置为value
调整比例：scale
散点大小、颜色不同：
symbolSize、itemStyle:{color}
涟漪动画：
type:effectScatter
涟漪大小：rippleEffect:{scale:3}
触发方式：showEffectOn :‘emphasis’