在ECharts中实现双折线图,特别是带有虚线的版本,是一种常用的数据可视化手段,可以帮助用户清晰地比较两个数据系列的趋势。本文将介绍如何使用ECharts库来创建这样一个图表,包括配置项、数据准备以及关键代码片段。 首先,我们看到一个简单的HTML模板,其中包含一个`<div>`元素用于ECharts图表的渲染,id为"main"。这表明我们将在这个元素内放置图表组件。 在Vue脚本部分,组件接收名为"lines"的属性,但这里并未明确使用,可能是为了表示可能存在的多条折线数据。组件的`data`方法返回了一个空对象,预示着后续会在此添加数据。 `data`对象包含了四个数组:`title`、`plan_production`(计划产量)、`actual_production`(实际产量)和`attainment_rate`(达成率),以及`productivity`(生产效率)。这些数组的值对应了图表的x轴和y轴数据。值得注意的是,`attainment_rate`和`productivity`数组是对`plan_production`和`actual_production`进行百分比计算得到的。 在数据处理部分,通过`for`循环,对数组进行了切片操作,删除了最后一个元素(可能是为了更好地显示折线效果),并设置了表格行的样式和布局。`getTableLine`函数用于生成带有虚线的行列表,参数`num`表示行的数量,生成的`lineList`将用于ECharts配置中的图形元素。 接下来,我们初始化ECharts实例`myChart`,传入页面上id为"main"的元素。`setOption`方法被用来设置图表的具体配置,包括标题文本、位置以及折线图的相关参数。标题部分包含实际产出、达成率和生产效率等信息,文本风格设置为居中显示。 配置选项中,`type`设为'line'表示绘制折线图,`shape`属性定义了折线的形状,而虚线可以通过调整线条的样式来实现,但在这个例子中,由于没有明确的虚线配置,我们假设虚线默认是通过ECharts的自适应线宽或颜色透明度来模拟的。 总结来说,这个示例展示了如何使用ECharts创建一个双折线图,其中一个折线是实线表示计划产量,另一个折线是虚线表示实际产量,同时附带达成率和生产效率的展示。通过调整ECharts的配置选项,可以进一步定制虚线的样式,如线宽、颜色和透明度。这提供了丰富的视觉呈现方式,有助于数据分析和解读。
<div>
双折现
<div id="main"></div>
</div>
</template>
<script>
export default {
props:['lines'],
data(){
return{
}
},
mounted(){
var data = {
title: ['总计', '12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07', '12-08', '12-09'],
plan_production: [500, 300, 490, 333, 346, 777, 888, 864, 789, 765],
actual_production: [300, 400, 500, 300, 400, 500, 300, 400, 500, 500],
attainment_rate: [60, 80, 90, 60, 70, 80, 90, 60, 70, 90],
productivity: [30, 45, 88, 100, 110, 70, 80, 90, 100, 100]
};
for (var pr in data) {
data[pr] = data[pr].slice(1, -1);
}
function getTableLine(num) {
var list = [];
var bottom = 122;
var height = 20;
for (var i = 0; i < num; i++) {
list.push({
type: 'line',
bottom: bottom - i * height,
// 偏移量
right: 80,
style: {
fill: '#333'
},
shape: {
x1: 0,
y1: 0,
// 控制坐标做线条
x2: 0,
y2: 0
}
});
}
return list;
}
// getTableLine参数代表行
var lineList = getTableLine(3);
// 获取页面标签
var myChart = this.$echarts.init(document.getElementById('main'));
//指定图标的配置和数据
myChart.setOption({
剩余5页未读,继续阅读
- 粉丝: 63
- 资源: 17
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++多态实现机制详解:虚函数与早期绑定
- Java多线程与异常处理详解
- 校园导游系统:无向图实现最短路径探索
- SQL2005彻底删除指南:避免重装失败
- GTD时间管理法:提升效率与组织生活的关键
- Python进制转换全攻略:从10进制到16进制
- 商丘物流业区位优势探究:发展战略与机遇
- C语言实训:简单计算器程序设计
- Oracle SQL命令大全:用户管理、权限操作与查询
- Struts2配置详解与示例
- C#编程规范与最佳实践
- C语言面试常见问题解析
- 超声波测距技术详解:电路与程序设计
- 反激开关电源设计:UC3844与TL431优化稳压
- Cisco路由器配置全攻略
- SQLServer 2005 CTE递归教程:创建员工层级结构