echarts配置项
series: [{
barWidth:26,// 柱形宽度(折线图无)
name: '',// legend对应的名称
type: 'bar',// 图形类型
stack: 'TUE',// 若多个值一样,则堆叠到一起
data: [1,1,1,11],// 数值
smooth: true, // 线条平滑展示,折线图起作用
areaStyle: {},// 面积填充,折线图有效
emphasis: {// 高亮
label: {
show: true,
textStyle: {
color: '#333333',
fontWeight: 'bold'
}
}
}
}]
makeline平均值样式配置
markLine: {
label: { // 去除文字
normal: {
position: 'inner',
show: false
}
},
symbol: 'none', //去掉箭头
data: [{
type: 'average',
}],
lineStyle: {
// 个性化折线样式
width: 1,
color: "#FD9D03" //折线的颜色
}
}
滚动条配置
dataZoom:[{
type: 'slider',//图表下方的伸缩条
show : true, //是否显示
realtime : true, //拖动时,是否实时更新系列的视图
start : 0, //伸缩条开始位置(1-100),可以随时更改
end : 100, //伸缩条结束位置(1-100),可以随时更改
}]
dataZoom=[ //区域缩放
{
id: 'dataZoomX',
show:true, //是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。
backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
type: 'slider', //slider表示有滑动块的,inside表示内置的
dataBackground:{ //数据阴影的样式。
lineStyle:mylineStyle, //阴影的线条样式
areaStyle:myareaStyle, //阴影的填充样式
},
fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
borderColor:"#ddd", //边框颜色。
filterMode: 'filter', //'filter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。
//'weakFilter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。
//'empty':当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。
//'none': 不过滤数据,只改变数轴范围。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。
zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
},
{
id: 'dataZoomY',
type: 'inside',
filterMode: 'empty',
disabled:false, //是否停止组件的功能。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。
zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
}
],
效果参考
- H5
代码实现
<!--为echarts准备一个具备大小的容器dom-->
<div :id="idCanvas" style="width:460px;height:350px;margin:auto;"></div>
//调用
this.drawLine(this.idCanvas);
//方法
drawLine(id) {
let that = this;
let type = this.type;
let dataX = this.timeData;
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
title: {
text: "",
subtext: this.textTitle
},
textStyle: {
color: "#838383"
},
tooltip: {
trigger: "axis",
formatter(params) {
return params[0].value;
}
},
grid: {
left: "18",
right: "22",
bottom: "3%",
containLabel: true
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
type: "category",
boundaryGap: false,
data: this.timeData,
axisLine: {
lineStyle: {
color: "#E1E1E1" // 颜色
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
textStyle: {
//改变刻度字体样式
color: "#838383"
},
//年月日 $t("") —— 国际化
formatter: function(params) {
if (type == 3) {
if (that.GLOBAL.locale == "zh") {
return params + that.$t("font_9");
} else {
return that.$t("month" + ~~params);
}
} else if (type == 1) {
if (dataX[dataX.length - 1] == params) {
return that.$t("font_81");
}
if (dataX[dataX.length - 2] == params) {
return that.$t("font_82");
}
return params;
} else if (type == 2) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 6;
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
}
}
}
},
yAxis: {
type: "value",
// scale: true,
// max: 60,
// min: 0,
// splitNumber: 6,
// boundaryGap: [0.2, 0.2],
axisLine: {
lineStyle: {
shadowOffsetY: -20,
shadowColor: "rgba(225,225,225,1)",
color: "#E1E1E1" // 颜色
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
//改变刻度字体样式
color: "#838383"
}
},
//设置网格线颜色
splitLine: {
show: true,
lineStyle: {
color: ["#F2F2F2"],
width: 1,
type: "solid"
}
}
},
series: [
{
type: "line",
data: this.opinionData,
itemStyle: {
normal: {
color: "#3192D2", //折线点的颜色
borderWidth: 2,
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: "solid",
color: "#71b5e1" //折线的颜色
}
}
}, //线条样式
symbolSize: 8, //折线点的大小
//区域颜色渐变
areaStyle: {
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(28,179,255,.5)" // 100% 处的颜色
},
{
offset: 1,
color: "rgba(184,240,255,0.1)" // 0% 处的颜色
}
]) //背景渐变色
}
}
}
]
});
}
- 小程序
代码实现
initChart(dataX, dataY) {
this.setData({
chartShow: true
})
this.ecComponent = this.selectComponent('#mychart-dom-line')
this.ecComponent.init((canvas, width, height, dpr) => {
let chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr //解决小程序视图模糊的问题,必写
});
canvas.setChart(chart);
let option = {
color: ["#37A2DA"],
grid: {
left: '0',
right: '5%',
top: '10%',
bottom: '10%',
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis',
formatter: function (params) {
console.log(params)
let time = params[0].axisValue.replace(/,/g, ".")
return '日期:' + time + '\n' + '时长:' + params[0].value + '分钟'
},
// extraCssText: "white-space:nowrap;"
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dataX,
axisLine: {
lineStyle: {
width: 2,
color: "#CBCBCB" // 颜色
}
},
axisLabel: {
formatter: function () {
return "";
}
},
//设置网格线颜色
splitLine: {
show: true,
lineStyle: {
color: ["#F0F5F8"],
width: 1,
type: "dashed"
}
}
// show: false
},
// yAxis: {
// x: 'center',
// type: 'value',
// splitLine: {
// lineStyle: {
// type: 'dashed'
// }
// },
// max: Math.max(...dataY)
// },
// dataZoom: [{
// type: 'slider', //图表下方的伸缩条
// show: true, //是否显示
// realtime: true, //拖动时,是否实时更新系列的视图
// start: 0, //伸缩条开始位置(1-100),可以随时更改
// end: 100, //伸缩条结束位置(1-100),可以随时更改
// }],
// series: [{
// type: 'line',
// smooth: true,
// data: dataY,
// }]
yAxis: {
type: "value",
axisLine: {
lineStyle: {
color: "#CBCBCB" // 颜色
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
//改变刻度字体样式
color: "#3C3C3C"
},
},
//设置网格线颜色
splitLine: {
show: true,
lineStyle: {
color: ["#F0F5F8"],
width: 1,
type: "dashed"
}
},
},
series: [{
type: "line",
data: dataY,
itemStyle: {
normal: {
color: "#00A8FF", //折线点的颜色
borderWidth: 3,
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: "solid",
color: "#00A8FF" //折线的颜色
}
}
}, //线条样式
symbolSize: 3, //折线点的大小
markLine: {
label: { // 去除文字
normal: {
position: 'inner',
show: false
}
},
symbol: 'none', //去掉箭头
data: [{
type: 'average',
}],
lineStyle: {
// 系列级个性化折线样式
width: 1,
color: "#FD9D03" //折线的颜色
}
}
}]
};
chart.setOption(option);
return chart;
})
},
微信小程序遇到的问题
- echarts for weixin的图表在手机上很模糊
官方文档提到了devicePixelRatio
这个设备像素比参数加上就不会模糊了
在初始化的地方写上即可