首页echarts 里面的markArea示例

echarts 里面的markArea示例

时间: 2024-12-24 16:19:33 浏览: 3

ECharts是一款强大的数据可视化库，其MarkArea（区域标记线）功能允许你在折线图上创建一个区域，并在区域内显示额外的信息，如平均值、百分比等。以下是使用ECharts创建一个基本MarkArea示例的基本步骤： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts MarkArea 示例</title>  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.0/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> // 初始化图表实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表配置项和数据 var option = { title: { text: 'MarkArea 示例' }, tooltip: {}, xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: {}, series: [ { name: '销售额', type: 'line', // 折线图 data: [120, 132, 101, 134, 90, 230, 210], // 数据点 markLine: { // 定义MarkArea silent: true, symbol: 'emptyCircle', // 标记点图标 data: [ { x: '50%', y: 'average', name: '平均值' }, // 平均值线 { x: '75%', y: 'quantile', name: '四分位数' } // 四分位数线 ], itemStyle: { normal: { areaColor: 'rgba(250, 190, 190, 0.5)', // 区域颜色 lineStyle: { color: 'rgba(250, 190, 190, 0.5)' } } } } } ] }; // 渲染图表 myChart.setOption(option); </script> </body> </html> ``` 在这个例子中，我们创建了一个折线图，MarkArea用于表示平均值线和四分位数线。你可以根据需要调整数据、标记线的位置和样式。

阅读全文