vue-echarts折线图一上一下显示数据

1、如图所示：

2、代码如下：

let myCharts = echarts.init(document.getElementById("myChartsId"));
myCharts.setOption({grid: {left: '10%',right: '10%',top: '35%',bottom: '35%' },tooltip: {trigger: 'axis',padding: 0,backgroundColor: "#122c3d",borderWidth: 0,formatter: function(param) {let resultTooltip = "<div style='background: #ffffff;border-radius: 4px;box-shadow: 0px 0px 6px 0px rgba(3,7,33,0.10);padding: 10px;'>" +"<div style='font-size: 12px; color: #999999;line-height: 18px;'>" + `时间：${param[0].name}` + "</div>" +"<div style='font-size: 12px; color: #999999;line-height: 18px;'>" + `气温：${param[0].value}℃` + "</div>" +"</div>";return resultTooltip;}},xAxis: {show: false,type: 'category',boundaryGap: false,data: xAxisData},yAxis: {show: false,type: 'value',max: tempValues,axisPointer: {snap: true}},series: [{name: '气温',id: '2',type: 'line',smooth: true,symbol: 'circle',symbolSize: 8,data: tempValues,lineStyle: {color: '#FE8F23'},itemStyle: {color: '#FE8F23'},//显示一上一下关键代码label: {show: true,position:'top',distance: -28,formatter: function(value){if(value.dataIndex % 2 != 0){return '\n\n\n' + value.data + "°";}else{return value.data + '°\n\n\n';}},fontSize: 12,color: '#666666'}},]
})

vue-echarts折线图一上一下显示数据相关推荐

Echarts 折线图间隔显示数据
var option = {// 主要用来控制图表四周留白grid: {left: '15%',top: '20%',right: '5%'},// 提示框组件tooltip: {trigger: ' ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
echarts折线图分段显示颜色
echarts折线图分段显示颜色 - vue技术交流群(864583465) 1.直接上代码 option = {xAxis: {type: 'category',data: ['Mon', 'Tue ...
chart.js ajax 折线图,如何在ChartJs 的折线图中显示数据值或索引标签
如何在Chartjs的折线图中显示数据值或索引值,如图所示: 图例.PNG 简介 Chart.js是一款不依赖任何外部js库的图标插件,具体的使用方法可查看Chart.js官网. 需求 Chart.j ...
Echarts 折线图对接后台数据
项目场景:Echarts 折线图对接后台数据想要使用Echarts折线图来对接后台返回的数据,因为第一次使用这个图表库还不是很熟练,在对接数据时遇到了一些小问题问题描述后台返回的数据看起来也没什 ...
Echarts折线图获取数据库数据展示
Echarts折线图获取mysql中的数据展示需求: 1 设计思路: 2 数据表设计 3 需求分析 4 后端接口开发 5 前端数据展示需求: 将数据库活动表的4种信息状态以 echarts表格展 ...
Vue绘制折线图并渲染数据
本文讲解vue项目中使用ECharts快速绘制折线图,并将服务器传来的数据渲染上去,提供源代码,可以直接复制粘贴使用. 效果展示: Vue 通常使用ECharts 生成图表,官网地址: Apache ...
vue echarts 折线图多Y轴显示，加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...
ui曲线谁是横坐标_vue项目引入echarts折线图横坐标显示问题
1:问题描述用vue的elmentui做后台系统!利用echarts展示数据(折线图)!发现在数据正常的情况下引入更新横坐标显示有问题!横坐标数组为空则显示正常! 2:相关代码 axios.get( ...

vue-echarts折线图一上一下显示数据

1、如图所示：

2、代码如下：

vue-echarts折线图一上一下显示数据相关推荐

最新文章

热门文章