Echart输入数据根据选择生成对应的图形类别

最新推荐文章于 2024-06-28 08:46:07 发布

sunny.day

最新推荐文章于 2024-06-28 08:46:07 发布

阅读量2k

点赞数 3

本文链接：https://blog.csdn.net/yang__k/article/details/81508426

版权

该博客介绍了如何使用Echarts库，根据用户输入的数据和选择，动态生成相应的图表类型，如柱状图、折线图等。

摘要由CSDN通过智能技术生成

.input1,
.input2 {
  width: 200px;
  margin: 10px;
}
.table {
  margin-top: 30px;
  width: 800px;
}
#main,#main1{
  background: #ff0;
  width: 800px;
  height:600px;
  margin-top: 50px;
}
.select{
  width: 200px;
  margin-left: 10px;
}
.btn{
  margin-left: 10px;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>echarts-demo</title>
    <script src="../lib/jquery-3.3.1.min.js"></script>
    <script src="../lib/vue.min.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <script src="../lib/iview-2.14.min.js"></script>
    <script src="../lib/iview-zh-TW.js"></script>
    <link rel="stylesheet" type="text/css" href="../lib/iview.css">
    <link rel="stylesheet" type="text/css" href="../css/echarts-hardy.css">
</head>

<body>
    <div id="hardy" style="margin: 100px">
        请输入数据:
        <i-input class="input1" v-model="input_data1" placeholder="请输入项目"></i-input>
        <input-number class="input2" v-model="input_data2" placeholder="请输入数据"></input-number>
        <i-select v-model="selectModel" class="select" placeholder="请选择图表类型" 
        @on-change="select_change">
        <i-option value="bar" label="条形统计图">
        </i-option>
        <i-option value="pie" label="扇形统计图">
        </i-option>
        <i-option value="line" label="折线统计图">
        </

最低0.47元/天解锁文章

sunny.day

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
Echart输入数据根据选择生成对应的图形类别

.input1,.input2 { width: 200px; margin: 10px;}.table { margin-top: 30px; width: 800px;}#main,#main1{ background: #ff0; width: 800px; height:600px; margin-top: 50px;}.select{ ...
复制链接

扫一扫