echarts 自定义模式 折线图

### 关于 ECharts 自定义模式下的折线图绘制 ECharts 是一个强大的可视化库，支持高度自定义的图表样式。以下是基于已有引用内容以及专业知识构建的一个完整的 ECharts 自定义折线图示例。 #### HTML 结构 HTML 部分提供了一个容器来承载图表： ```html <template> <div class="line-chart"> <div id="main"></div> </div> </template> <style scoped> .line-chart { width: 100%; height: 100%; background-color: #080C17; overflow: hidden; } #main { width: 80%; height: 500px; margin: 20px auto; } </style> ``` 此部分通过设置 `width` 和 `height` 属性确保图表能够适配页面布局[^2]。 --- #### JavaScript 实现逻辑 JavaScript 中的核心代码负责初始化 ECharts 图表并配置其选项： ```javascript <script> import * as echarts from 'echarts'; export default { mounted() { this.initChart(); }, methods: { initChart() { const chartDom = document.getElementById('main'); const myChart = echarts.init(chartDom); const option = { backgroundColor: '#080C17', tooltip: { trigger: 'axis' }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], splitLine: { show: true, lineStyle: { color: '#333' } }, // 显示网格线 axisLine: { show: false }, // 不显示轴线 axisTick: { show: false }, // 不显示刻度线 axisLabel: { textStyle: { color: '#fff' } } // 设置 X 轴文字颜色 }, yAxis: { type: 'value', splitLine: { show: false }, // 隐藏 Y 轴网格线 axisLine: { show: false }, // 隐藏 Y 轴线 axisTick: { show: false }, // 隐藏 Y 轴刻度线 axisLabel: { textStyle: { color: '#fff' } } // 设置 Y 轴文字颜色 }, series: [{ name: 'Sales', type: 'line', smooth: true, symbolSize: 8, itemStyle: { color: '#FFA500' }, areaStyle: {}, data: [120, 200, 150, 80, 70, 110, 130] }] }; myChart.setOption(option); } } }; </script> ``` 在此实现中，X 轴和 Y 轴分别进行了详细的定制化处理，包括但不限于隐藏轴线、调整字体颜色以及控制网格线的可见性[^1]。 --- #### 主要功能说明 1. **背景颜色** 使用 `backgroundColor` 参数设定整个图表区域的颜色为深色调 (`#080C17`)，增强视觉对比效果。 2. **数据展示** 数据点由 `series.data` 定义，表示一周内的销售量变化情况。曲线平滑参数 `smooth` 设定为 `true` 提升美观程度。 3. **坐标轴样式** - X 轴设置了时间序列标签，并启用了网格线 (splitLine)，同时隐藏了轴线和刻度线。 - Y 轴仅保留数值标注，同样去除了多余的装饰线条。 4. **交互提示框** 启用 `tooltip.trigger='axis'` 功能，在鼠标悬停时动态显示对应的数据值。 --- ### 示例运行环境 为了使该示例正常工作，请确保项目已安装最新版本的 ECharts 库并通过 Vue CLI 或其他前端框架集成到应用中。 ---