本文目录
- Echarts折线图显示最高最低点以及首尾两点的标注
- Echarts折线图实现 多条折线
- 关于echarts 使用 dataZoom 中动态配置 start、end 值出现折线图错乱问题
- echarts折线图实现按时间自动划分间隔(3)
- Vue-ele中echart折线图动态展示和修改
Echarts折线图显示最高最低点以及首尾两点的标注
最终实现的效果
上面这是写死的数据，接下来就用动态数据再写一遍
Echarts折线图实现 多条折线
官方例子： Examples - Apache ECharts 官方文档： Documentation - Apache ECharts 必须要的属性：xAxis、yAxis、series 效果图： 实现步骤： 样式： 遇到什么问题，可留言，看到会尽快回复。
关于echarts 使用 dataZoom 中动态配置 start、end 值出现折线图错乱问题
项目中使用echarts进行图表的展示，当数据量很大的时候，需要配置dataZoom进行图表可滚动，但是数据都挤在一起，严重影响了图表的美观性，所以动态配置dataZoom的start 、 end属性 在图表option设置前，进行计算startLength的值 这种设置，在数据动态切换时，随着this.startLength的变化，会出现折线图发生部分连接错乱问题，后发现解决方法如下： 添加filterMode属性为 empty即可解决该问题
echarts折线图实现按时间自动划分间隔(3)
因为直接设置interval在X轴type为time的折线图中不起作用，所以需要minInterval ：自动计算的坐标轴最小间隔大小。
Vue-ele中echart折线图动态展示和修改
《LineChart :reportsList="reportsList" v-if="Object.keys(reportsList).length" /》 data() { return { reportsList: {}, }; }, created() { reportsGet("reports/type/1").then((res) =》 { console.log(res); let { meta, data } = res.data; if (meta.status == 200) { this.reportsList = data; } else { this.$message.error(meta.msg); } }); },data() { return { lineList: {}, }; }, props: { reportsList: { type: Object, default: () =》 { return { title: { text: "折线图", }, tooltip: {}, xAxis: { axisLabel: { interval: 0, rotate: 0, margin: 15 }, data: , }, yAxis: {}, series: , }; }, }, }, mounted() { var myChart = echarts.init(this.$refs.main); this.lineList = JSON.parse(JSON.stringify(this.reportsList)); this.lineList.title = { text: "折线图", }; /* 给折线图设置上下左右的距离 */ this.lineList.legend.top=’10%’; this.lineList.xAxis.axisLabel = { interval: 0, rotate: 30, margin: 15 }; this.lineList.grid = { top: "30%", width: "80%", height: "50%", left: "20%", }; /* 把折线图所属区域删掉 */ this.lineList.series.forEach(r=》{ delete r.areaStyle; r.smooth=true }) myChart.setOption(this.lineList); window.LineChart = myChart; }, };
