echarts入门堆叠折线图

效果图

鼠标移到折线图上只显示当前的信息

tooltip : {show: true,trigger: 'item'},

鼠标移到折线图上显示所有信息

tooltip : {show: true,trigger: 'item'trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}
},

十字准星指示器核心是将tooltip的type改成cross，如果想改变十字准星指示器的颜色改变，使用crossStyle可以改变指示器的线条以及颜色

axisPointer:{       //坐标轴指示器type:'cross',   //十字准星指示器crossStyle: {color: "rgba(255,215,90)",  //线的颜色width: 1,type: "solid",}
},

完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="../lib/echarts.min.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {// title: {//     text: 'Stacked Line'// },tooltip: {trigger: 'item',axisPointer:{       //坐标轴指示器type:'cross',   //十字准星指示器// label:{//     backgroundColor:'#ccc'// }crossStyle: {color: "rgba(255,215,90)",  //线的颜色width: 1,type: "solid",}},},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: 'Email',type: 'line',symbolSize: 5, // 设置折线上圆点大小symbol: 'circle', // 设置拐点为实心圆stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',symbolSize: 5, // 设置折线上圆点大小symbol: 'circle', // 设置拐点为实心圆stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',symbolSize: 5, // 设置折线上圆点大小symbol: 'circle', // 设置拐点为实心圆stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',symbolSize: 5, // 设置折线上圆点大小symbol: 'circle', // 设置拐点为实心圆stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',symbolSize: 5, // 设置折线上圆点大小symbol: 'circle', // 设置拐点为实心圆stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
</html>

echarts入门堆叠折线图相关推荐

四、Echarts实现堆叠折线图
重在处理接口返回的数据 1. 数据: dataDetails: { test_result: { test_bugs: { "test_bugs_trend": { "2 ...
vue使用echarts的堆叠折线图一直警告[Violation] 'requestAnimationFrame' handler 用时 N 毫秒怎么解决...
这个警告通常是因为你的图表渲染过于复杂或者数据量过大,导致在浏览器的一帧内渲染超时. 你可以尝试以下方法来解决这个问题: 减少图表中的数据量,使其更加简单,从而减少渲染时间. 使用图表的 lazyUp ...
01-Echarts折线图基本实现、最大值、最小值、堆叠折线图等等
目录 Echarts折线图基本实现特点最大值.最小值.平均值.标注区间显示折线线条平滑效果.风格.填充效果紧挨边缘脱离0值比例堆叠折线图 Echarts折线图基本实现特点折线图常用来分 ...
[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
Matlab论文插图绘制模板第31期—堆叠折线图（stackedplot）
在之前的文章中,分享过Matlab折线图的绘制模板: 面积图的绘制模板: 面积填充图的绘制模板: 这次再来分享一种线图:堆叠折线图. 先来看一下成品效果: 特别提示:Matlab论文插图绘制模板系列, ...
【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
echarts type:line 折线图折线折点样式
echarts type:line 折线图折线折点样式 series: [{name: '课时',type: 'line',data: [23,60,20,36,23,85],label:{ //折 ...
直播app源代码，echarts 柱状图，折线图互转实例
直播app源代码,echarts 柱状图,折线图互转实例的相关代码 function initDayChart(){var myChart = echarts.init(document.getEle ...
在 Echarts 中设置折线图x轴文字的倾斜度
在 Echarts 中设置折线图x轴文字的倾斜度在工作需求中,有需要把 Echarts 折线图的文字变成倾斜的样式.类似这样的: 这个功能咋实现? 很简单.加一句话就行了 // 配置项 option ...

echarts入门堆叠折线图

echarts入门堆叠折线图相关推荐

最新文章

热门文章

echarts入门 堆叠折线图

echarts入门 堆叠折线图相关推荐

最新文章

热门文章

echarts入门堆叠折线图

echarts入门堆叠折线图相关推荐