echarts的基本使用-白红宇的个人博客

echarts的基本使用

发布日期：2021-05-07 08:59:28 浏览次数：21 分类：原创文章

本文共 1940 字，大约阅读时间需要 6 分钟。

介绍

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

官网：

基本使用

流程：

1、下载或者引用echart文件

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

2、准备一个具备大小的bom容器

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

3、初始化echarts对象

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

4、指定图表的配置项和数据

 var option = {   }

将配置项设置给echarts实例对象

 myChart.setOption(option);

常用配置项

1、标题title {      text}2、提示tooltip{   	trigger触发方式}3、图例组件，series中有name属性时，改属性可以删除或者为空legend{   	data:[]}4、工具箱toolbox{   }5、网格配置，控制线形态、柱状图等直角坐标系类的图表大小grid6、设置x轴的相关配置xAxis{   	//xAxis中的类型	type	//数据	data:[]}7、设置y轴的相关配置yAxis8、系列图标配置，决定显示那种类型的图标series:[	{   		//名字		name		//类型		type		//数据		data:[]	}]9、颜色color:[]

实例：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>第一个 ECharts 实例</title>    <!-- 引入 echarts.js -->    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <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: '第一个 ECharts 实例'            },            tooltip: {   },            legend: {                   data:['销量']            },            xAxis: {                   data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]            },            yAxis: {   },            series: [{                   name: '销量',                type: 'bar',                data: [5, 20, 36, 10, 10, 20]            }]        };         // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);        window.addEventListener('resize', function() {   	       myChart.resize();        });    </script></body></html>

定制化

1、复制官网实例

2、修改对应的配置项

上一篇：Spring知识小汇（8）——Spring整合Mybatis

下一篇：Spring知识小汇（7）——AOP的相关知识

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

介绍

基本使用

发表评论

最新留言

关于作者

推荐文章