数据可视化
- 是关于数据视觉表现形式的科学技术研究
- 可以借助图形化数据更好的分析数据
- 增强数据的灵性
介绍
一个基于JavaScript的开源可视化图标库
特点
- 丰富的可视化类型
- 多数据格式无需转换
- 千万级别数据进行展示
- 移动端的优化
- 多渲染方案，跨平台使用
- 深度的交互方案
- 动态数据
- 绚丽的特效
使用流程（vue）
-
引入echarts
import * as echarts from "echarts"; -
初始化图表
let barChart = echarts.init(this.$refs.barChart); -
设置echarts 数据及配置项
barOption: { // title 设置图表的标题 title: { ... }, // tooltip 提示框组件 tooltip: { ... }, // legend 图例组件 legend:{ ... }, // 设置轴 xAxis: { ... }, yAxis: {...}, // 系列 配置图表的类型 series: [ ... ], }, }; -
绘制图表
barChart.setOption(this.barOption);
配置项
-
title：标题组件
title: { text: "柱状图", link: "http://www.baidu.com", target: "self", // 当前页打开超链接 textStyle: { color: "#2376b7", }, top: "0px", // backgroundColor:'#2376b7', // borderColor:'#2376b7', // borderWidth:5, x: "center", /* subtext:'副标题', sublink:'http://www.baidu.com', subtextStyle:{ color:'#fff' }, */ }, -
tooltip：提示框组件
tooltip: { // show:false // 是否显示 trigger: "axis", // 触发类型 // 坐标轴指示器 axisPointer:{ // type:'shadow' type:'cross' }, // showContent:false //显示内容 // 悬浮层样式 backgroundColor:"#8abcd1", borderColor:"#8abcd1", textStyle:{ color:'#fff' }, // 自定义提示框信息 formatter(params){ for(let i=0;i<params.length;i++){ return 'name:' + params[i].name + '-- price:' + params[i].data.value + '-- date:' + params[i].data.date } } }, -
legend：图例组件
legend:{ // show:true, // 设置是否显示图例 x:'left', left:'10px', // icon:'circle', // 图例宽高 itemWidth:20, itemHeight:20, textStyle:{ color:"#2376b7" } }, -
xAxis、yAxis：设置轴
xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], type:'category' // 当前坐标轴类型 value 数据轴 category 类目轴 }, yAxis: {}, -
series：设置图表的类型
series: [ { name: "销量", type: "bar", // 系列名 data: [ {"value":'15',"date":'2020-1-1'}, {"value":'30',"date":'2020-2-1'}, {"value":'18',"date":'2020-2-23'}, {"value":'5',"date":'2020-3-2'}, {"value":'22',"date":'2020-4-15'}, {"value":'6',"date":'2020-5-1'}, ], }, ], -
grid:直角坐标系内绘图网格
grid:{ left:'10%', top:'25%', bottom:'15%', // backgroundColor:'#333', // borderColor:'yellow' }, -
dataZoom:数据缩放
// 数据区域 dataZoom: [ { type: "slider", xAxisIndex: 0, filterMode: "none", }, { type: "slider", yAxisIndex: 0, filterMode: "none", }, ], -
dataset:数据排序
// 数据排序 dataset: [ { // 数据分类 dimensions: ["类别", "数量"], // 分类数据 source: [ ["美食", 123], ["日化", 85], ["熟食", 253], ["数码", 65], ["蔬菜", 23], ["杂项", 53], ], }, { transform: { type: "sort", config: { dimension: "数量", order: "desc", }, }, }, ], // series series: [ { name: "销量", type: "bar", // 系列名 encode:{ x:'类别', y:"数量" }, datasetIndex:1, } ]
柱状图基本设置
series-bar
series: [
{
name: "销量",
type: "bar", // 系列名
data: [
{ value: "15", date: "2020-1-1" },
{ value: "30", date: "2020-2-1" },
{ value: "18", date: "2020-2-23" },
{ value: "5", date: "2020-3-2" },
{ value: "22", date: "2020-4-15" },
{ value: "6", date: "2020-5-1" },
],
barWidth: 15, //设置宽度
// 单独设置每个轴的颜色
itemStyle: {
normal: {
color: function (params) {
let colorList = [
"#8076a3",
"#2474b5",
"#2c9678",
"#fbcd31",
"#f03f24",
"#ec4e8a",
];
return colorList[params.dataIndex];
},
},
},
// 最大值、最小值
markPoint: {
symbolSize: 40,
label:{
fontSize:'12px',
fontWeight:'bolder',
},
itemStyle:{
color:'#22a2c3'
},
data: [
// 标注的数据数组，每一项都是一个对象
{
type: "max",
name: "最大值",
},
{
type: "min",
name: "最小值",
},
],
},
// 图表的标线
markLine: {
data: [
{
type: "average", //平均值
name: "平均值",
},
],
},
},
],
饼图基本设置
series-pie
series: [
{
name: "Access From",
type: "pie",
// 饼图的半径
radius: ["42%", "60%"],
avoidLabelOverlap: false,
// 设置环装文本标签
label: {
show: false,
position: "center",
},
// 是否设置成南丁格尔
roseType: "area",
itemStyle: {
color: "#2376b7",
shadowBlur: 200,
shadowColor: "rgba(0,0,0,0.5)",
},
emphasis: {
label: {
show: true,
fontSize: 24,
// fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{
value: 1048,
name: "Search Engine",
itemStyle: { normal: { color: "#8076a3" } },
},
{
value: 735,
name: "Direct",
itemStyle: { normal: { color: "#2474b5" } },
},
{
value: 580,
name: "Email",
itemStyle: { normal: { color: "#2c9678" } },
},
{
value: 484,
name: "Union Ads",
itemStyle: { normal: { color: "#fbcd31" } },
},
{
value: 300,
name: "Video Ads",
itemStyle: { normal: { color: "#f03f24" } },
},
],
},
],
折线图基本设置
series-line
series: [
{
data: [150, 230, 110, 218, 138, 247, 260],
type: "line",
// 开启平滑过渡
smooth:true,
areaStyle:{},
markLine: {
data: [
{
type: "average", //平均值
name: "平均值",
},
],
},
markPoint: {
symbolSize: 60,
label:{
fontSize:'14px',
fontWeight:'bolder',
},
itemStyle:{
color:'#2376b7'
},
data: [
// 标注的数据数组，每一项都是一个对象
{
type: "max",
name: "最大值",
},
{
type: "min",
name: "最小值",
},
],
},
},
],
散点图基本设置
series-scatter
series: [
{
type: "scatter",
symbolSize: 15,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#f1c4cd",
},
{
offset: 1,
color: "#ef3473",
},
],
},
emphasis:{
itemStyle:{
borderColor:"#ef3473",
borderWidth:30
}
}
},
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68],
],
},
],
K线图基本设置
series-candlestick
KLineOption: {
title: {
text: "基础K线图",
textStyle: {
color: "#ef3473",
},
left: "2.5%",
},
tooltip: {},
xAxis: {
data: ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"],
},
yAxis: {},
series: [
{
type: "candlestick",
data: [
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42],
],
},
],
},
雷达图基本设置
series-radar
radar: {
// shape: 'circle',
radius:'50%',
indicator: [
{ name: "Sales", max: 6500 },
{ name: "Administration", max: 16000 },
{ name: "Information Technology", max: 30000 },
{ name: "Customer Support", max: 38000 },
{ name: "Development", max: 52000 },
{ name: "Marketing", max: 25000 },
],
},
series: [
{
name: "Budget vs spending",
type: "radar",
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: "Allocated Budget",
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: "Actual Spending",
},
],
},
],
漏斗图基本设置
series-funnel
series: [
{
name: "Funnel",
type: "funnel",
left: "10%",
top: 60,
bottom: 25,
width: "80%",
min: 0,
max: 100,
minSize: "0%",
maxSize: "100%",
sort: "descending", // 降序排序
// sort: "ascending", // 升序排序
// sort: "none", // 无排序
gap: 2,
label: {
show: true,
position: "inside",
color:'#fff'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: "solid",
},
},
itemStyle: {
borderColor: "#fff",
borderWidth: 1,
},
emphasis: {
label: {
fontSize: 20,
},
},
data: [
{ value: 60, name: "Visit" },
{ value: 40, name: "Inquiry" },
{ value: 20, name: "Order" },
{ value: 80, name: "Click" },
{ value: 100, name: "Show" },
],
},
],
仪表盘基本设置
series-gauge
series: [
{
name: "Pressure",
type: "gauge",
detail: {
formatter: "{value}",
valueAnimation:true // 动画
},
progress:{
show:true
},
data: [
{
value: 50,
name: "SCORE",
},
],
},
],
关系图基本设置
series-graph
// 关系图的节点数据
list: [
{
id: "1",
name: "唐僧",
symbolSize: 50,
},
{
id: "2",
name: "孙悟空",
symbolSize: 50,
},
{
id: "3",
name: "猪八戒",
symbolSize: 50,
},
{
id: "4",
name: "沙和尚",
symbolSize: 50,
},
{
id: "5",
name: "白龙马",
symbolSize: 50,
},
],
// 关系数据
relationShips: [
{
source: "1", // 边的节点名称
target: "2", // 目标节点名称
relation: {
name: "师徒",
id:'1'
},
},
{
source: "1", // 边的节点名称
target: "2", // 目标节点名称
relation: {
name: "师徒",
id:'1'
},
},
{
source: "1", // 边的节点名称
target: "3", // 目标节点名称
relation: {
name: "师徒",
id:'1'
},
},
{
source: "1", // 边的节点名称
target: "4", // 目标节点名称
relation: {
name: "师徒",
id:'1'
},
},
{
source: "1", // 边的节点名称
target: "5", // 目标节点名称
relation: {
name: "师徒",
id:'1'
},
},
{
source: "2", // 边的节点名称
target: "3", // 目标节点名称
relation: {
name: "师兄弟",
id:'2'
},
},
{
source: "2", // 边的节点名称
target: "4", // 目标节点名称
relation: {
name: "师兄弟",
id:'2'
},
},
{
source: "2", // 边的节点名称
target: "5", // 目标节点名称
relation: {
name: "师兄弟",
id:'2'
},
},
{
source: "3", // 边的节点名称
target: "4", // 目标节点名称
relation: {
name: "师兄弟",
id:'3'
},
},
],
graphOption: {
title: {
text: "基础关系图",
textStyle: {
color: "#ef3473",
},
left: "2.5%",
},
series: [
{
type: "graph",
data: "",
layout: "force",
itemStyle: {
color: "#ef3473",
},
label: {
show: true,
},
force:{
repulsion:240,
gravity:0.01,
edgeLength:200
},
links:'',
edgeLabel:{
show:true,
position:'middle',
formatter:(params) => {
return params.data.relation.name
}
}
},
],
},
树形图基本设置
series-tree
series: [
{
type: "tree",
orient: "TB", // 设置布局方向
left: "20%",
data: [
{
// 最外层的数据就是数据的根节点
name: "根节点",
children: [
{
name: "层级2",
children: [
{
name: "层级3-1",
children: [
{ name: "数据1", value: 1234 },
{ name: "数据2", value: 2345 },
{ name: "数据3", value: 3456 },
{ name: "数据4", value: 4567 },
],
},
{
name: "层级3-2",
children: [
{ name: "数据1", value: 1234 },
{ name: "数据2", value: 2345 },
{ name: "数据3", value: 3456 },
{ name: "数据4", value: 4567 },
],
},
],
},
],
},
],
symbolSize: 35,
label: {
rotate: 90,
position: "left",
verticalAlign: "middle",
align: "center",
fontSize: 14,
},
leaves: {
label: {
position: "right",
verticalAlign: "middle",
align: "center",
},
},
emphasis: {
focus: "descendant",
},
},
],
主题
内置主题 light/dark
echarts.init(this.$refs.barChart,'dark');
扫一扫
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
