首页给我找一篇关于 Echarts 的 mark : {show: true}的示例文档我想看效果

给我找一篇关于 Echarts 的 mark : {show: true}的示例文档我想看效果

时间: 2023-05-26 18:06:13 浏览: 43

以下是一个关于 Echarts mark : {show: true} 的示例文档： ```html <!DOCTYPE html> <html> <head> <title>Echarts - Mark 示例</title> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> <style> #chart { height: 400px; } </style> </head> <body> <div id="chart"></div> <script> // 实例化 Echarts var myChart = echarts.init(document.getElementById('chart')); // 设置图表配置 var option = { title: { text: 'Echarts - Mark 示例' }, tooltip: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: '销量', type: 'bar', data: [120, 200, 150, 80, 70, 110, 130], markPoint: { symbolSize: 50, label: { show: true, position: 'top', formatter: function(params){ return params.value; } }, data: [ {type: 'max', name: '最大值', itemStyle: {color: 'red', emphasis: {color: 'blue'}}}, {type: 'min', name: '最小值', itemStyle: {color: 'green', emphasis: {color: 'blue'}}} ] } }] }; // 使用设置好的配置项显示图表 myChart.setOption(option); </script> </body> </html> ``` 在这个例子中，我们使用了 `markPoint` 对象来表示最大值和最小值的点，并且使用了 `show` 属性将标记点展示在了 chart 上。标记点还具有其他的属性，比如大小、颜色等。在这个例子中，我们设置了最大值为红色、最小值为绿色，然后使用 `emphasis` 属性让鼠标悬浮在标记点上时的颜色为蓝色。最后使用 `formatter` 属性将数值显示在上面。你可以复制这段代码在本地环境中运行，查看效果。