一、可视化介绍

可视化：将数据用图表展示出来，让数据更加直观、让数据特点更加突出
应用场景：营销数据、生产数据、用户数据

二、可视化库介绍

常见的数据可视化库：

D3.js：目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
ECharts.js：百度出品的一个开源 Javascript 数据可视化库
Highcharts.js：国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV：蚂蚁金服全新一代数据可视化解决方案等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

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

三、Echarts

(一) Echarts引入和使用

下载echarts（库）引入文件到html页面中

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

准备一个DOM容器

<style>.box {width: 400px;height: 400px;cursor: pointer;}
</style>
<div class='box'></div>

初始化一个echarts对象

var box = document.querySelector(".box")
var echarts1 = echarts.init(box)

指定配置项和数据

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

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

echarts1.setOption(option)

（二）了解基础配置

title：标题组件，包含主标题和副标题
tooltip：提示框组件
legend：图例组件
series
- 系列列表：每个系列通过 type 决定自己的图表类型
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格
color：调色盘颜色列表

注：不要求全部记忆，只需要知道怎么在官方文档上查找学习

官方文档：Documentation - Apache ECharts

（1）示例：标题组件title

              title: {show: true,          //是否显示标题组件text: '主标题',link: "http://www.baidu.com",   //主标题文本超链接textStyle: {                   //主标题的文本样式 相当于css的color: "blue",fontWeight: "100"},subtext: "副标题",subtextStyle: {               //副标题的文本样式color: "red",fontWeight: "100",fontSize: "20px"},textAlign: "auto",         //整体（包括 text 和 subtext）的水平对齐textVerticalAlign: "auto", //整体（包括 text 和 subtext）的垂直对齐padding: [5, 10],          //标题内边距left: 400,                 //title 组件离容器左侧的距离backgroundColor: "yellow"   //标题背景色，默认透明},

（2）示例：工具组件toolbox

                toolbox: {//配置工具feature: {mytool: {    //自定义的工具名字，只能以 my 开头show: true,title: "自定义扩展方法",icon: "image://https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658941200&t=d5f42a41eab8af5c9929fcc6f9e1eff7",onclick: function() {console.log("点击事件")}},saveAsImage: {name: "保存"},restore: {      //配置项还原},dataView: { //数据视图工具，可展现当前图表所用的数据，编辑后可动态更新},dataZoom: {},    //数据区域缩放magicType: {      //动态类型切换type: ['line', 'bar', 'stack']}}},

（3）示例：提示框组件tooltip

            tooltip: {show: true,trigger: "axis", //触发类型 "none"||"axis"showContent: false,   // 是否显示提示框浮层alwaysShowContent: true,  //是否永远显示提示框内容triggerOn: "click",         //提示框触发的条件backgroundColor: "gold",textStyle: {color: "white"},axisPointer: {     //是配置坐标轴指示器的快捷方式type: "cross",  //指示器类型 line shadow none crossaxis: "x",      //指示器的坐标轴snap: true,     //坐标轴指示器是否自动吸附到点上label: {        //坐标轴指示器的文本标签show: true,color: "red",formatter: ({    //文本标签文字的格式化器value}) => {console.log(value)return `--${value}` //value*2}}}},

（4）示例：图例组件legend

legend: {type: "scroll",     //图例的类型 plain普通图例 scroll可滚动翻页的图例orient: "vertical",  //图例列表的布局朝向 vertical horizontaldata: [{name: '销量1',   //图例项的名称icon: "circle",   //图例项的 iconitemStyle: {color: "red"}}, {name: '销量2',icon: "rect",itemStyle: {color: "red"}}, {name: '纯利1',icon: "triangle",textStyle: {color: "red",fontSize: "20px"}}, {name: '纯利2',icon: "path://",   //'path://' 将图标设置为任意的矢量路径icon: "image://url",       //通过图片链接设置为图片icon:  "image://https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658941200&t=d5f42a41eab8af5c9929fcc6f9e1eff7"   //通过图片编码设置为图片}]},

（5）示例：系列列表series

              series: [{name: "某某系列1",type: 'line',colorBy: "series", //按系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色  symbol: "rect",     //标记的图形 设置拐点 cursor: "move",label: {show: true    //是否显示标签文字},endLabel: {       //折线端点的标签show: true},labelLine: {show: true,   //是否显示连接线smooth: true    //是否平滑},lineStyle: {       //标签的视觉引导线配置color: "red",width: 2,join: "miter"  //设置2个长度不为0的相连部分如何连接在一起的属性},smooth: 0.3,data: [420, 432, 401, 434, 190, 130, 120],}, {name: "某某系列2",type: 'line',symbol: "arrow",symbolSize: 10,     // 拐点大小   data: [860, 962, 961, 964, 1260, 1360, 1360],}]};

（6）示例：直角坐标系 grid 中的 x、y轴（类似）

 xAxis: {show: true;  //是否显示x轴                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']   //类目数据，在类目轴position:'top'   //x轴的位置name:'坐标轴的名称'axisTick: {show: false // 去除刻度线},axisLabel: {color: '#4c9bfd' // 文本颜色},axisLine: {show: false // 去除轴线},boundaryGap: false  // 去除轴内间距},

（7）蓝丁格尔玫瑰图

<style>.box {width: 500px;height: 500px;}
</style>
<div class="box"></div>
<script>var box = document.querySelector(".box")var ect = echarts.init(box)option = {title: {text: 'Nightingale Chart',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},toolbox: {show: true,feature: {mark: {show: true},dataView: {show: true,readOnly: false},restore: {show: true},saveAsImage: {show: true}}},series: [{name: '面积模式',type: 'pie',radius: [30, 110],center: ['25%', '50%'],roseType: 'radius',color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],itemStyle: {borderRadius: 5},label: {show: false,fontSize: 10},emphasis: {label: {show: true}},labelLine: {// 连接扇形图线长length: 6,// 连接文字线长length2: 8},data: [{value: 20,name: '云南'},{value: 26,name: '北京'},{value: 24,name: '山东'},{value: 25,name: '河北'},{value: 20,name: '江苏'},{value: 25,name: '浙江'},{value: 30,name: '四川'},{value: 42,name: '湖北'}]}, ]};ect.setOption(option)
</script>

效果图：

可视化 Echarts相关推荐

Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
数据可视化ECharts的七大常用图表，看完就会用(1)
本文的后半部分:数据可视化ECharts的常用图表,看完就会用(2) 文章目录数据可视化什么是数据可视化? 数据可视化的好处数据可视化的实现方式 ECharts ECharts的特性一个ECh ...
可视化-echarts流向图制作及recharts
前段时间用echarts做了流程图,在此记录下制作步骤. 一.Echarts是什么 Echarts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个 ...
数据可视化echarts学习笔记
文章目录 echarts 使用渐变色一些配置项 dataset与transform数据过滤 dataset transform 动态排序时间轴更新数据极坐标系 echarts 官网https: ...
九十一、前端可视化ECharts的使用
@Author:Runsen 学python的应该听过Pyecharts.那么就应该有ECharts 这次介绍的就是一个基于Javascript的数据可视化库ECharts. Echarts 由百度的 ...
数据可视化——echarts
目录一.可视化面板介绍二.可视化库介绍三.Echarts-体验 1.引入echarts 插件文件到html页面中 2.准备一个具备大小的DOM容器 3.初始化echarts实例对象 4.指定配置 ...
可视化 | Echarts基础异步加载数据交互组件数据集
目录 1. ECharts 简介 2. ECharts 安装 3. ECharts 配置语法 4. ECharts 图饼 5. ECharts 样式设置 6. ECharts 异步加载数据 7. EC ...
数据可视化Echarts学习指南
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. 01-使用技术完成该项目 ...

可视化 Echarts

一、可视化介绍

二、可视化库介绍

三、Echarts

(一) Echarts引入和使用

（二）了解基础配置

（1）示例：标题组件title

（2）示例：工具组件toolbox

（3）示例：提示框组件tooltip

（4）示例：图例组件legend

（5）示例：系列列表series

（6）示例：直角坐标系 grid 中的 x、y轴（类似）

（7）蓝丁格尔玫瑰图

可视化 Echarts相关推荐

最新文章

热门文章