1. 使用echarts画标记线（工字型）

1.1 实现效果

1.2 使用属性

详细参数可查看echarts官网，markline属性
https://echarts.apache.org/zh/option.html#series-bar.markLine

1.3 代码实现

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: [{data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],}],yAxis: [{type: 'value',}],toolbox: {feature: {magicType: {type: ['bar', 'line'],},iconStyle: {borderWidth: 10},}},series: [{name: 'Direct',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220],// 关键代码markLine: {symbol: "line", // 两头也是横线symbolSize: 18, // 长度18pxlineStyle: { // 线的样式type: "solid",color: "#1DB163",width: 1,},data: [[// 按照起点-终点连接成一条线{xAxis: 'Tue',yAxis: 60}, // 起点{xAxis: 'Tue',yAxis: 80}, // 终点]]},}]
};option && myChart.setOption(option);

2. echarts图表数据为空时，设置纵坐标为0-1

2.1 实现效果

2.2 使用属性

详细参数可查看echarts官网，yAxis min max属性
https://echarts.apache.org/zh/option.html#yAxis.min

2.3 代码实现

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: [{data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],}],yAxis: [{type: 'value',// 关键代码// 设置最小值为0 最大值为1 即可实现无数据时 纵坐标仍有刻度min: 0,max: 1,}],toolbox: {feature: {magicType: {type: ['bar', 'line'],},iconStyle: {borderWidth: 10},}},series: [{name: 'Direct',type: 'bar',barWidth: '60%',data: [],}]
};option && myChart.setOption(option);

3. tooltip 数据展示

3.1 实现效果

3.2 使用属性

详细参数可查看echarts官网，tooltip属性
https://echarts.apache.org/zh/option.html#grid.tooltip.formatter

3.3 代码实现

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;let xAxisData = [];
let data1 = [];
let data2 = [];
let data3 = [];
let data4 = [];
for (let i = 0; i < 10; i++) {xAxisData.push('Class' + i);data1.push(+(Math.random() * 2).toFixed(2));data2.push(+(Math.random() * 5).toFixed(2));data3.push(+(Math.random() + 0.3).toFixed(2));data4.push(+Math.random().toFixed(2));
}
var emphasisStyle = {itemStyle: {shadowBlur: 10,shadowColor: 'rgba(0,0,0,0.3)'}
};
option = {legend: {data: ['bar', 'bar2', 'bar3', 'bar4'],left: '10%'},toolbox: {feature: {magicType: {type: ['stack']},dataView: {}}},tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow", // 默认为直线，可选为：'line' 或'shadow'},formatter: (params) => {let docStyle = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:`;let result = `<div style="color: #20253B;font-size: 12px; line-height: 30px;">${params[0].name}<br/>`;params.forEach((data, index) => {let docColor = docStyle + data.color + '"></span>';result += `${docColor} ${data.seriesName}<span style="margin-left: 20px; float: right; ">￥${data.data}</span>${index === params.length - 1 ? "" : "<br/>"}`;})result += "</div>";return result;}},xAxis: {data: xAxisData,name: 'X Axis',axisLine: { show: false },},yAxis: {minInterval: 1},color: ["#4875f6","#1db163","#ffb51b","#ff7979"],series: [{name: 'bar4',type: 'bar',stack: 'one',data: data4,z: 99},{name: 'bar',type: 'bar',stack: 'one',data: data3,z: 10,},{name: 'bar2',type: 'bar',stack: 'one',data: data2,z: 11,},{name: 'bar3',type: 'bar',stack: 'one',data: data1,z: 12},]
};option && myChart.setOption(option);

4. 工具栏 toolBox 图标配置

4.1 实现效果

4.2 使用属性

详细参数可查看echarts官网，toolbox属性参见https://echarts.apache.org/zh/option.html#toolbox

4.3 代码实现

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},toolbox: {feature: {magicType: {type: ["bar", "line"],icon: {bar: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHKSURBVEiJ7dVNSFRRGAbg9zv3iMxiDPc3RDgzd65FdCchRIjZtBlw0UJiFm6SWhSBQS1bBW5cFCiYEgTqLGaTtGqpILaJcfIvuc1VXPiDm8qgdNQ5XxtnYYTd+ekqMe/y8PI952y+Q2PpTJKAEQAmAowkYARC3+5Jpd4HhY6nMywAmEGipYigwTpch4/TbViW0x44rC55lhb02s+giO0MR2znaU1gsCaAyQd6A0CSgV4Vi3dVD/tIIpGQAAYJ1AfStwj8KnI5bv9zeHPn2yMQtj+vzE16n+ZzTHgMzW+Uut5UQ7jbUG3OHdPsCAGAUldMgJ6wEA9KDW8lN85MM2g4GK0VTBHbGyXGs1C4MNtqOy0kjefMGPKWsqsnmoffHwrihdOGSb+qanMGwLBDDcXoz0N5VwJZEL4c7V3o+b3reV4BQH/VsLKdXmLcLMijRH5h8QeAF5Z19UNRGHvr69P7fi9fNmxovJPyYDK/uPy1dOa6H2crAcuCXTe3VQ3yp5zZrvbz4uZoLH6vkuFFLuZX3fmpsmG9LzeMRv2Whb5WCWxoEQZQPry2lt0FcL8S9G85r/9xHf5P4I2JiUxn0DCNpTNJAC8JuBgk/At+6Y366X1qFAAAAABJRU5ErkJggg==`,line: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFDSURBVEiJ7Zc/S8NAGIefNy2og4MfwE2SQhFpFTrU0cGlQwbpYF1V/FKCVqUu4uYgODmKdHDwX5b2C7i55F4Hm8Vqckk1Usiz5F5yued+vMdB5Pikp+TLUGGvDLCz3Za8rN1ur6nCmZOXMKLTad8KLOYujijEuVH+rYXcam3FGDYBHIerp4f7ftz8hMRbJc+rrVmZVXyEFkILFT9pemzipeqLZ4wcAss2bge5ttokSYnVCOifXC6Ze/y1p6S8eLMfLhUf0Y3ReC7t59bi7xKm6Wlm8aQJs4uZLOH4Wv/EdIhVtamqTds6Dvsei16IMhuNPx/x9aTiBbdS3yUEIAAgpDF692PtVuqNUMPn18f+TWqxeS8PSzPmUh2zarHBMUrGmQfSi4Pg7g04yCJNYjpOdSEuxDYcnZ6vKwwk7582hQGw/wEISHSC/xE5IAAAAABJRU5ErkJggg==`,},},},showTitle: false,right: 100,itemSize: 30,itemGap: -1,},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]
};

echarts使用总结（使用echarts画工字型标记线；无数据时设置纵坐标刻度0-1；tooltip数据展示；工具栏 toolBox 图标配置）相关推荐

如何使用Tushare和Echarts来画股票K线图
如何使用Tushare和Echarts来画股票K线图技术支持 Tushare大数据社区官网首先介绍一下这次要使用的两个工具,Tushare是一个基于Python的金融数据接口,拥有丰富的数据内 ...
Echarts的二次封装思考心得。封装成果：折线柱状混合图、立体柱状折线混合图、markline标记线
先说一下这次对ECharts二次封装总结的一些东西吧,感觉这是重点! 二次封装及使用的矛盾痛点: 一般封装只会暴露出一些常用的属性,最常见的如图表的颜色.数据: 封装人员也不会考虑把所有情况都封装起来 ...
JavaScript销售经理能力分析echarts（标记点、标记线）
echarts.js下载链接提取码:7gaghttps://pan.baidu.com/s/1XwM6UJV3FK0nkxDxwEoR3w?pwd=7gag 根据以下数据实现图标,设置标记点标记线 ...
echarts的标记线和标记点
markPoint: 标记点---------------------------markLine:标记线看了好几天还是不太理解markPoint和markLine的作用, 昨晚看视频终于有点理解了 ...
echarts标记线的样式_ECharts提示框组件指示器的线条样式
tooltip.axisPointer.lineStyle | Object 设置 ECharts 提示框组件指示器的线条样式,axisPointer.type 为 'line' 时有效. t ...
画线标记html,markline.js——轻量级canvas绘制标记线的库
这段时间要做的是一个数据可视化的小型项目.其中最基本要求是实现两点之间的迁徙关系(比如同一个用户不同时间上网的地点)用一条有向线段(markline)联系在一起.很自然的我一开始想的就是采用百度的ec ...
echarts简单使用、echarts通过计时器进行动态更新数据、echarts连接数据库实时更新数据
1.echarts引入在官网下载并放入项目中. 引入echarts.js文件: <script src="./echarts.js"></script> ...
java中点击按钮出现echarts图表_echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮...
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
WebGIS中利用AGS JS+eCharts实现一些数据展示的探索
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eCharts提供了迁徙图.热点图.夜视图等跟地图能够很好的 ...

echarts使用总结（使用echarts画工字型标记线；无数据时设置纵坐标刻度0-1；tooltip数据展示；工具栏 toolBox 图标配置）