Echarts
0. 绪论
0.1 作用
-
帮助更好地分析数据
-
增加数据的灵性
0.2 特点
- 丰富的可视化类型
- 多数据格式无需转换
- 展示大量数据
- 移动端优化
- 多渲染方案跨平台使用
- 深度的交互方案
- 动态数据
- 绚丽的特效
1 HelloWorld
1.1 安装 echarts
npm install --save echarts
1.2 引用 echarts
ECharts 模板：
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myEcharts = echarts.init(this.$.refs.myChart)
myEcharts.setOption ({
title: {
text: "",
},
legend: {
show: true,
},
grid: {
show: true,
},
xAxis: {
data: ["A", "B"]
},
yAxis: {},
series: {
name: "",
type: "",
data: [10, 20]
}
})
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
在 "./src/views/About.vue" 中，
<template lang="html">
<div ref="myChart" id="demoDiv"></div>
</template>
<script>
// 引用 echarts
import * as echarts from "echarts";
export default {
mounted(){
// 寻找 DOM 节点，并使用 myEcharts 接受
let myEcharts = echarts.init(this.$refs.myChart)
// 设置参数
myEcharts.setOption({
// 设置 echarts 标题
title:{
text: "Hello World"
},
// 设置 x轴数据
xAxis:{
data:["A", "B", "CDE"]
},
// 设置 y轴数据
yAxis:{},
// 设置系列
series:{
name: "name",
type: "bar", // 柱状图
data: [100, 200 ,50]
}
})
}
}
</script>
<style lang="css">
#demoDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
2. 配置项
2.1 title 配置
标题相关
title:{
text: "主标题",// 文本
subtext: "副标题",// 副标题文本
textStyle:{
color: "yellow",
fontSize: 30
},
link: "http://www.baidu.com",// 链接
sublink: "http://www.baidu.com",// 副标题链接
subtextStyle:{
color: "green",
fontSize: 50
},
target: "self",
backgroundColor: "red",// 背景颜色
borderColor: "blue",// 边框颜色
borderWidth: 5,// 边框宽度
x: "center",// x轴位置
y: "left"// y轴位置
}
- x/y 的值为：" top | left | right | bottom | number(px) "
2.2 tooltip 属性
悬浮框
tooltip:{
trigger: "axis",// 触发类型
axisPointer:{// 坐标轴指示器
type: "shadow"
},
//showContent: false,// 悬浮框隐藏
backgroundColor: "red",
borderColor: "red",
borderWidth: 5,
textStyle:{
color: "yellow",
fontFamily: "consolas"
},
formatter(params){// 自定义悬浮框信息
console.log(params);
for(var i=0; i<params.length; i++){
return "名字："+params[i].name+"——价格："+params[i].data;
}
}
}
-
trigger 触发类型：" item | axis "
-
axisPointer 坐标轴指示器：
2.3 legend 属性
图例相关
legend:{// 设置图例
show: true,// 设置图例启动
//icon: "circle",// 设置图例图标
top: "25%",
itemWidth:10,
itemHeight:100,
textStyle:{
color: "red",
fontSize: 30,
backgroundColor: "yellow"
}
}
- icon 图例图标：" () | circle | square "
2.4 grid
直角坐标系内绘图网格
grid:{
show: true,
left: "5%",
top: "5%",
right: "5%",
bottom: "5%",
backgroundColor: "rgba(224, 17, 17, 1)",
borderColor: "rgba(96, 67, 67, 1)",
}
2.5 数据区域缩放
用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
series: {
dataZoom: [
{
type: 'slider',// 滑动条型数据区域缩放组件
xAxisIndex: 0,// x轴设置
filterMode: 'none'// 数据过滤不过滤数据，只改变数轴范围
},
{
type: 'slider',
yAxisIndex: 0,// y轴设置
filterMode: 'none'
},
]
}
2.6 数据排序
数据集组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。
dataset: [ // 数据集组件
{
dimensions: ["分类", "数量"], //设置分类数据
source: [
//原始数据。一般来说，原始数据表达的是二维表。
["Hannah Krause", 41],
["Zhao Qian", 20],
["Jasmin Krause ", 52],
["Li Lei", 37],
["Karle Neumann", 25],
["Adrian Groß", 19],
["Mia Neumann", 71],
],
},
{
transform: {
//数据改变
type: "sort", //按照大小排序
config: { dimension: "数量", order: "desc" }, //"sort" 数据转换器的“条件”
},
},
]
2.7 主题
2.7.1 内置主题
echarts.init(this.$refs.myChart, "dark");
echarts.init(this.$refs.myChart, "light");
2.7.2 自定义主题
-
在主题编辑器中编辑主题：https://echarts.apache.org/zh/theme-builder.html
-
下载对应主题 json 格式
-
创建 js 文件将该 json 文件写入并暴露
-
let roma = (json) export default roma -
引用该主题 js 文件
-
import roma from "../assets/roma" ... echarts.init(this.$refs.myChart, "roma");
2.8 图表大小自适应
window.addEventListener("resize", () => { myChart.resize() });
2.9 图表加载动画
myChart.showLoading(); // 开始等待
myChart.hideLoading(); // 关闭等待
-
设置 json-server 模拟数据
- 全局下载 npm install -g json-server
- 新建 mock 文件夹，创建 json 文件，设置数据
- 在 mock 中启动 json-server --watch (文件名).json --port (端口号)
-
页面请求数据
-
methods: { async linkData() { let mapnum = await axios({ url: "http://localhost:3000/one" }); console.log(mapnum.data); this.echartsData = mapnum.data; }, }, mounted() { let myChart = echarts.init(this.$refs.myChart); myChart.showLoading(); this.linkData().then(() => { myChart.hideLoading(); let option = { title:{}, tooltip:{}, legend:{}, series:[] }; myChart.setOption(option); }) } -
自定义效果
-
// 是否开启动画 animation:true, // 是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。 animationThreshold:5, // 初始动画的时长 animationDuration:2000, //初始动画的缓动效果。官方更多解释：https://echarts.apache.org/examples/zh/editor.html?c=line-easing animationEasing:"linear", // 初始动画的延迟 animationDelay:1000,
2.10 echarts 事件
let myChart = echarts.init(this.$refs.myChart);
myChart.on("click", function(params){
console.log(params);
// 输出内容
// params对象的属性
// componentType当前点击的图形元素所属的组件名称
// seriesType系列类型
// seriesName系列名称
// name数据名
// data传入的原始数据项
// value传入的数据值
});
使用 query 只对指定的组件的图形元素的触发回调，可以对多个图形进行监听：
chart.on(eventName, query, handler);
举例，
myChart.on('click', 'series', function(){...});
myChart.on('click', 'series.line', function(){...});
myChart.on('click', 'dataZoom', function(){...});
myChart.on('click', 'xAxis.category', function(){...});
3. 柱状图-bar
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart);
let xData = ["xA","xB","xC"];
let yData = [10,50,20];
let option = {
tooltip: {
show: true
},
grid: {
show: true
},
xAxis: {
data: xData,
type: "category"
},
yAxis: {
type: "value"
},
series: [
{
type: "bar",
name: "Name",
data: yData,
barWidth: 10, // 设置柱宽
itemStyle: { // 设置各个柱图的颜色
normal: {
color: function(params){
let colorList = [
"#eeeeee",
"#999999",
"#333333"
];
return colorList[params.dataIndex];
}
}
},
markPoint: { // 标记
data: [
{
type: "max",
name: "MAX",
},
{
type: "min",
name: "MIN"
}
]
},
markLine: {
data: [
{
type: "average",
name: "AVER"
}
]
}
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
- xAxis / yAxis x/y轴类型：" value(数值轴) | category(类目轴) | time(时间轴) | log(对数轴) "
4. 饼状图-pie
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart);
let data = [
{ value: 20, name: "xA", itemStyle: { normal: { color: '#00ffff' } } },
{ value: 30, name: "xB", itemStyle: { normal: { color: '#ff00ff' } } },
{ value: 50, name: "xC", itemStyle: { normal: { color: '#ffff00' } } }
];
let option = {
title: {
text: "主标题"
},
tooltip: {
show: true,
trigger: 'item'
},
grid: {
orient: 'vertical',
show: true
},
series: [
{
type: "pie",
name: "Name",
// 设置环形图
//radius:['70%','40%'],
label: {
show: true,
position: "inside",
color: "#000000"
},
labelLine: {
show: false
},
//roseType: 'area',
itemStyle: {
color: "#18e368",
shadowBlur: 200,
shadowColor: "rgba(0, 0, 0, 0.5)"
},
data
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
5. 折线图-line
5.1 基本设置
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart)
let xData=['A', 'B', 'C', 'D', 'E', 'F'];
let data=[20, 50, 10, 10, 0, -10];
let option = {
tooltip: {
show: true
},
grid: {
show: true
},
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
type: "line",
data,
smooth: true
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
- smooth ：取值范围 0 到 1，表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5
- areaStyle ：区域填充样式。设置后显示成区域面积图。
5.2 堆叠设置
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart)
let xData=["A", "B", "C", "D"];
let option = {
tooltip: {
show: true
},
grid: {
show: true
},
xAxis: {
type: "category",
data: xData
},
yAxis: {
type: "value"
},
series: [
{
type: "line",
name: "aaa",
stack: "num",
data: [10, 20, 30, 20],
areaStyle: {},
emphasis: {
focus: "series"
}
},
{
type: "line",
name: "bbb",
stack: "num",
data: [10, 100, 0, -20],
areaStyle: {},
emphasis: {
focus: "series"
}
},
{
type: "bar",
name: "ccc",
//stack: "num",
data: [20, 30, 60, 70],
areaStyle: {},
emphasis: {
focus: "series"
}
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
6. 散点图-scatter
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart)
let data = [
[9.0, 7.04], [3.0, 9.65], [9.05, 8.23], [18.0, 9.76], [15.0, 7.56],
[23.4, 5.31], [10.1, 7.47], [16.0, 8.26], [12.7, 3.53], [9.35, 7.2],
[7.4, 8.2], [3.07, 4.82], [18.2, 6.83], [2.02, 4.47], [1.05, 3.33],
[4.05, 4.96], [6.03, 7.24], [17.0, 6.55], [12.0, 8.84], [8.18, 5.82],
[6.32, 5.68], [18.07, 4.33]
]
let option = {
tooltip: {
show: true
},
grid: {
show: true
},
xAxis: {},
yAxis: {},
series: [
{
type: "scatter",
symbolSize: 20,
data,
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#00ccff"
},
{
offset: 1,
color: "rgba(255, 173, 119, 1)"
}
],
globalCoord: true
},
emphasis: {
itemStyle: {
borderColor: "rgba(102,205,46,0.30)",
borderWidth: 30
}
}
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
-
offset ：01（0%100%）
-
emphasis：高亮的图形和标签样式
7. K 线图-candlestick
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
data: [
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42]
]
}
},
computed: {
newarr() {
let linstdata = this.data.map((v) => { return v[0]; })
return linstdata;
}
},
mounted() {
let myEcharts = echarts.init(this.$refs.myChart)
let option = {
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "cross"
}
},
grid: {
show: true
},
xAxis: {
data: ["A", "B", "C", "D"]
},
yAxis: {},
series: [
{
type: "candlestick",
data: this.data,
itemStyle: {
color: "#ec0000", // 上涨颜色
color0: "#00da3c", // 下跌颜色
borderColor: "#8a0000", // 上涨边框颜色
borderColor0: "#008f28", // 下跌边框颜色
},
markPoint: {
data: [
{
type: "max",
name: "MAX",
valueDim: "highest"
},
{
type: "min",
name: "MIN",
valueDim: "lowest"
},
{
type: "average",
name: "AVER",
valueDim: "close"
}
]
}
},
{
name: "aaa",
type: "line",
data: this.newarr,
smooth: true,
lineStyle: {
opacity: 0.5
}
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
- valueDim：用于指定哪个维度的最大、最小、平均值
8. 雷达图-radar
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart)
let data=[];
let option = {
tooltip: {
show: true
},
grid: {
show: true
},
radar: [ // 雷达图专用组件
{
shape: 'circle',
indicator: [
{ name: "A", max: 200 },
{ name: "B", max: 500 },
{ name: "C", max: 600 },
{ name: "D", max: 100 },
{ name: "E", max: 300 },
{ name: "F", max: 100 }
],
radius: 120, // b 半径
startAngle: 90, // 坐标系起始角度
splitNumber: 10, // 指示器轴分割段数
axisName: { // 指示器名称配置项
formatter: "【{value}】",
color: "#ff00ff"
},
splitArea: { // 坐标轴在 grid 区域中的分隔区域
areaStyle: { // 分隔区域的样式设置
color: ["#77eadf", "#26c3be", "#64afe9", "428bd4"],
shadowColor: "rgba(0, 0, 0, .2)",
shadowBlur: 10
}
}
}
],
series: [
{
type: "radar",
symbol: "rect", // 标记的图形
symbolSize: 12, // 标记的大小
lineStyle: {
type: "dashed"
},
data: [
{
value: [100, 400, 120, 100, 180, 100],
name: "",
areaStyle: { // 设置填充
color: "rgba(225, 228, 52, .6)"
}
}
]
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
9. 漏斗图-funnel
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart)
let data=[
{ value: 60, name: "A" },
{ value: 40, name: "B" },
{ value: 20, name: "C" },
{ value: 80, name: "D" },
{ value: 100, name: "E" }
];
let option = {
tooltip: {
show: true,
trigger: "item",
formatter: "{a} <br/>{b} : {c}%"
},
grid: {
show: true
},
series: [
{
top: 60,
left: "10%",
bottom: 60,
min: 0, // 指定的数据最小值
max: 100,
minSize: "0%", // 数据最小值映射宽度
maxSize: "100%",
sort: "ascending",
gap: 2, // 数据图形间距
label: {
show: true,
position: "inside"
},
itemStyle: {
borderColor: "red",
borderWidth: 2
},
emphasis: {
label: {
fontSize: 30
}
},
type: "funnel",
name: "",
data
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
10.仪表盘-gauge
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart)
let option = {
tooltip: {
show: true
},
series: [
{
type: "gauge",
name: "",
data: [
{
value: 45,
name: ""
}
],
detail: {
valueAnimation: true
},
progress: {
show: true
}
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
11.关系图-graph
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
list: [
// 节点名称，节点序号，节点形状，节点大小
{ name: "A", id: "1", symbol: 'circle', symbolSize: 30 },
{ name: "B", id: "2", symbol: 'circle', symbolSize: 30 },
{ name: "C", id: "3", symbol: 'circle', symbolSize: 30 },
{ name: "D", id: "4", symbol: 'circle', symbolSize: 30 },
{ name: "E", id: "5", symbol: 'circle', symbolSize: 30 }
],
num: [ // 关系数据
{
source: "1", // 关系起点，边的源节点名称的字符串
target: "2", // 关系终点，边的目标节点名称字符串
relation: {
name: "xxx", // 关系名称
id: "1" // 关系编号
}
},
{
source: "1",
target: "3",
relation: {
name: "yyy",
id: "2"
}
},
{
source: "5",
target: "4",
relation: {
name: "zzz",
id: "3"
}
}
]
}
},
mounted() {
let myEcharts = echarts.init(this.$refs.myChart)
let option = {
tooltip: {
show: true
},
series: [
{
type: "graph",
layout: 'force', // 布局方式：引导式布局
data: this.list,
itemStyle: {
color: "#95dcb2"
},
label: {
show: true,
position: "bottom",
distance: 5, // 距离图形元素距离
fontSize: 18,
align: "center" // 文字水平对齐方式
},
force: { // 设置间距
repulsion: 100, // 点与点之间距离
gravity: 0.01, // 与中心点的距离
edgeLength: 200 // 边的两个节点之间的距离
},
links: this.num, // 节点之间的数据
edgeLabel: { // 标签
show: true,
position: "middle", // 标签的位置：线的中点
fontSize: 12,
formatter: (params) => { // 标签内容设置
return params.data.relation.name;
}
},
edgeSymbol: ["circle", "arrow"], // 边两边的类型
autoCurveness: 0.01 // 针对多边情况，自动计算各边曲率
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
12.树形图-tree
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart)
let data = {
name: "A",
children: [
{
name: "B",
children: [
{
name: "C-1",
children: [
{ name: "D1", value: 100 },
{ name: "D2", value: 200 },
{ name: "D3", value: 300 },
{ name: "D4", value: 400 }
]
},
{
name: "C-2",
children: [
{ name: "E1", value: 500 },
{ name: "E2", value: 600 },
{ name: "E3", value: 700 },
{ name: "E4", value: 800 }
]
}
]
}
]
}
let option = {
tooltip: {
show: true,
trigger: "item"
},
series: [
{
type: "tree",
data: [data],
top: "1%",
left: "7%",
bottom: "1%",
right: "20%",
symbolSize: 10,
orient: 'BT',
label: {
position: "left",
rotate: 90,
verticalAlign: "middle",
align: "right",
fontSize: 9
},
leaves: {
label: {
position: "right",
verticalAlign: "middle",
align: "left"
}
},
emphasis: {
focus: "descendant"
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
13.地图图
将获取的 json 数据，通过 JavaScript 文件进行暴露：
export let data = (json data)
引用时，
import * as echarts from "echarts"
import {data} from '../assets/xxx.js'
...
export default {
mounted() {
...
echarts.registerMap("china", mapData)
...
}
}
中国地图
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
import {mapData} from '../assets/chinamap.js';
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart)
echarts.registerMap("china", mapData)
let option = {
geo:{
type: "map",
map: "china",
roam: true, // 是否开启鼠标缩放和平移漫游
zoom: 1, // 当前视角的缩放比例，越大比例越大
center: [115.86459, 28.68946], // 当前视角的中心点，用经纬度表示
label: {
show: true,
color: '#ff6600',
fontSize: 10
},
itemStyle: {
areaColor: "#ff6600"
}
}
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css" scoped>
#chartDiv{
width: 600px;
height: 600px;
border: 1px solid black;
}
</style>
地区地图
<template lang="html">
<div ref="myChart" id="chartDiv"></div>
</template>
<script>
import * as echarts from "echarts";
import {mapData} from "../assets/bjmap.js"
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart)
echarts.registerMap("bjmap", mapData)
let data = [ { value: [116.40400, 39.92800] } ] // 设置气泡点数据
let option = {
geo: {
type: "map",
map: "bjmap",
roam: true
},
series: [
{
type: "effectScatter", // 带有涟漪特效动画
data,
coordinateSystem: "geo",
rippleEffect: {
number: 2, // 波纹的数量
scale: 4 // 波纹的最大缩放比例
},
itemStyle: {
color: "red"
}
},
{
symbolSize: 20,
data: [
{
name: "北京市", // 数据项名称
value: [
116.46, // 经度
39.92, // 纬度
340 // 北京地区的数值
]
}
],
type: "scatter",
coordinateSystem: "geo"
}
]
};
myEcharts.setOption(option);
}
}
</script>
<style lang="css">
#chartDiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
编辑于 2022/11/2
-End-
