Echarts升级1：各个参数详解
目录
一、引用
1、使用npm安装Echarts
2、全局引入Echarts
3、根据项目使用Echarts的程度选择按需引入
4、CDN引入
二、各个参数详解
1、 grid: 控制x轴、y轴的整体位置、图表整体偏移
2、xAxis :x轴数据显示
3、position: echarts弹出框超出范围解决方案
4、给折线图加上下限
5、legend:折线图多个折线每次只显示一条
6、dataZoom: 伸缩x轴
7、tooltip: 显示x轴、y轴上的指定值，加背景色
8、自适应窗口大小
9、visualMap
一、引用
1、使用npm安装Echarts
npm install echarts --save2、全局引入Echarts
//main.js 不推荐
import echarts from "echarts";
Vue.prototype.$echarts = echarts;3、根据项目使用Echarts的程度选择按需引入
let Echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar'); //所需图表4、CDN引入
二、各个参数详解
1、 grid: 控制x轴、y轴的整体位置、图表整体偏移
grid: {
left: '2%',
right: '5%',
bottom: '3%',
containLabel: true
},containLabel: true 控制x轴内内容是否允许溢出
不设置的话横轴数据会超出x轴左侧！
2、xAxis :x轴数据显示
xAxis: {
name: "日期",
type: "category",
boundaryGap: true,
data: this.xAxis.map(function (str) {
return str.replace(' ', '\n')
})
},data中的处理为日期折叠，有实用！
3、position: echarts弹出框超出范围解决方案
tooltip: {
trigger: 'axis',
// 浮窗位置
position: function (point, params, dom, rect, size) {
var x = 0;
var y = 0;
var pointX = point[0];
var pointY = point[1];
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},
},见注释完全引用即可，弹框会一直位于正中位置！
4、给折线图加上下限
series: [{
type: "line",
data: this.avgData,
markLine: {
silent: true,
data: [{
yAxis: this.allLine[i].MaxTh
}, {
yAxis: this.allLine[i].MinTh
}]
}
}]5、legend:折线图多个折线每次只显示一条
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
selectedMode: 'single',
},selectedMode: 'single' 控制只显示一条
6、dataZoom: 伸缩x轴
require('echarts/lib/component/dataZoom');
dataZoom: [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom: '8%',
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: "#d3dee5",
},
textStyle: {
color: "#fff"
},
borderColor: "#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],7、tooltip: 显示x轴、y轴上的指定值，加背景色
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(248,252,253,0.8)', //通过设置rgba调节背景颜色与透明度
extraCssText: 'box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.35)',
color: '#353638',
borderWidth: '1',
borderColor: '#77bef7',
textStyle: {
color: '#353638',
},
padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]
position:['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧
},8、自适应窗口大小
为了兼容性，需要做到每个图表根据屏幕变化而自适应宽高
单个 / 多个图表均生效：
//图表实例
data() {
return {
chart: null
}
}, window.addEventListener('resize', () => {
this.chart.resize();
});9、visualMap
visualMap=[ //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。
// colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。
{
show:true, //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
type: 'continuous', // 定义为连续型 viusalMap
min:10, //指定 visualMapContinuous 组件的允许的最小值
max:100, //指定 visualMapContinuous 组件的允许的最大值
range:[15, 40], //指定手柄对应数值的位置。range 应在 min max 范围内
calculable:true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
realtime:true, //拖拽时，是否实时更新
inverse:false, //是否反转 visualMap 组件
precision:0, //数据展示的小数精度，默认为0，无小数点
itemWidth:20, //图形的宽度，即长条的宽度。
itemHeight:140, //图形的高度，即长条的高度。
align:"auto", //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
text:['High', 'Low'], //两端的文本
textGap:10, //两端文字主体之间的距离，单位为px
dimension:2, //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
seriesIndex:1, //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
hoverLink:true, //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
inRange:{ //定义 在选中范围中 的视觉元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange:{ //定义 在选中范围外 的视觉元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
orient:"vertical", //图例排列方向
padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]
backgroundColor:"transparent", //标题背景色
borderColor:"#ccc", //边框颜色
borderWidth:0, //边框线宽
textStyle:mytextStyle, //文本样式
formatter: function (value) { //标签的格式化工具。
return 'aaaa' + value; // 范围标签显示内容。
}
},
{
show:true, //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
type: 'piecewise', // 定义为分段型 visualMap
splitNumber:5, //对于连续型数据，自动平均切分成几段。默认为5段
pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
{min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 到 200（自定义label）'},
{value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
{max: 5} // 不指定 min，表示 min 为无限大（-Infinity）。
],
categories:['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'], //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集
min:10, //指定 visualMapContinuous 组件的允许的最小值
max:100, //指定 visualMapContinuous 组件的允许的最大值
minOpen:true, //界面上会额外多出一个『< min』的选块
maxOpen:true, //界面上会额外多出一个『> max』的选块。
selectedMode:"multiple", //选择模式，可以是：'multiple'（多选）。'single'（单选）。
inverse:false, //是否反转 visualMap 组件
precision:0, //数据展示的小数精度，默认为0，无小数点
itemWidth:20, //图形的宽度，即长条的宽度。
itemHeight:140, //图形的高度，即长条的高度。
align:"auto", //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
text:['High', 'Low'], //两端的文本
textGap:10, //两端文字主体之间的距离，单位为px
showLabel:true, //是否显示每项的文本标签
itemGap:10, //每两个图元之间的间隔距离，单位为px
itemSymbol:"roundRect", //默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
dimension:2, //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
seriesIndex:1, //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
hoverLink:true, //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
inRange:{ //定义 在选中范围中 的视觉元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange:{ //定义 在选中范围外 的视觉元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
orient:"vertical", //图例排列方向
padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]
backgroundColor:"transparent", //标题背景色
borderColor:"#ccc", //边框颜色
borderWidth:0, //边框线宽
textStyle:mytextStyle, //文本样式
formatter: function (value) { //标签的格式化工具。
return 'aaaa' + value; // 范围标签显示内容。
}
}
];10.series
- textStyle
series: [{
type: 'bar',
barWidth: 30,
z: 1,
data: aar,
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 14,
color: '#ffffff',
fontWeight: 500,
fontFamily: 'Microsoft YaHei',
}
},
}]2.菱形立柱
series: [{
type: 'bar',
barWidth: barWidth,
z: 1,
data: aar,
},
{
z: 3,
type: 'pictorialBar',
symbolPosition: 'start',
data: aar,
symbol: 'diamond',
symbolOffset: [0, '50%'],
symbolSize: [barWidth, 10],
silent: true,
},
{
z: 3,
type: 'pictorialBar',
symbolPosition: 'end',
data: aar,
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [barWidth, barWidth * 0.3],
silent: true,
},
],