ECharts折线图

### ECharts 折线图使用教程 #### 创建基本折线图实例 为了创建一个简单的折线图，首先需要引入 ECharts 库文件。接着，在 HTML 文件中定义一个容器用于放置图表，并通过 JavaScript 初始化该图表对象并设置其选项。 ```html <!-- 引入 echarts.js --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <div id="main" style="width: 600px;height:400px;"></div> <!-- 定义图表容器 --> ``` 初始化图表： ```javascript var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); ``` 配置项是决定图表外观的关键部分之一。下面是一个基础的折线图配置示例[^1]： ```javascript option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' // 设置为折线图类型 }] }; myChart.setOption(option); // 将配置应用到图表上 ``` #### 自定义样式与交互设计 对于更复杂的场景，可以进一步自定义图表的颜色、宽度以及其他视觉属性来满足特定需求。例如改变线条颜色和粗细可以通过 `itemStyle` 属性完成[^3]；而为了让用户体验更好，则可加入一些交互特性如鼠标悬停提示框等[^2]。 ```javascript series: [{ ... itemStyle: { normal: { lineStyle: { color: '#ff7f50', // 更改线条颜色 width: 2 // 调整线条厚度 } } }, emphasis: { // 高亮状态下的样式 focus: 'series' }, tooltip: { // 添加工具提示 trigger: 'axis' } }] ``` 上述代码片段展示了如何利用 ECharts 构建一个具有个性化样式的动态折线图，并实现了当用户将光标移到曲线上时显示具体数值的功能。