数据可视化作业

最新推荐文章于 2024-06-13 15:24:59 发布

劳大别肘

最新推荐文章于 2024-06-13 15:24:59 发布

阅读量234

点赞数 2

文章标签：信息可视化

本文链接：https://blog.csdn.net/2301_77838071/article/details/137007704

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 步骤1：引入echarts.js文件 -->
  <script src="js/echarts.js"></script>
  <!-- 
  步骤1：引入echarts.js文件
  步骤2：准备一个呈现图表的盒子
  步骤3：初始化echarts实例对象
  步骤4：准备配置项
  步骤5：将配置项设置给echarts实例对象
   -->
</head>
 
<body>
  
  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 800px;height: 600px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    var datax=['第2个月', '第3个月', '第4个月', '第5个月', '第6个月', '第7个月', '第8个月']
        //四条数据
        var data1=[50, 230, 224, 218, 135, 47, 260]   
        var data2=[100, 220, 24, 118, 120, 111, 230]
        var data3=[120, 124, 118, 120, 22, 218, 135]
        var data4=[110, 124, 118, 220, 124, 118, 20]
        
        option = {
          graphic: [      //插入图片
            {
        type: 'image',       //指定一个名称
        style: {
            //有的浏览器的安全策略限制，不能直接在 ECharts 中使用本地文件路径，包括绝对路径，作为图片的引用。
            image: "https://profile-avatar.csdnimg.cn/default.jpg!1", // 图片的路径，可以是相对路径或绝对路径
            width: 30,     //宽度
            height: 30,
            },
            left: '23%',    //向左偏离量
            
            }
          ],
            title:{
                text:'406 猿华趋势',
                subtext:'只包含程度较深的'
            },
            legend:{
                height: 20, // 图片的高度
                width: 20,   // 图片的宽度
                data:['肘关节','虚治病','牢大','小V'],
                type: 'scroll',     // 添加滚动图例类型
                width: '30%',       // 设置图例的宽度
                orient: 'horizontal' // 设置图例水平排列
            },
            tooltip: {        //浮窗效果
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
            }
            },
            xAxis: {
                type: 'category',
                data: datax
            },
            yAxis: {
                type: 'value'
            },
            toolbox:{       //工具箱
                show: true, 
                feature:{
                    dataView: {  // 添加 dataView 功能
                    show: true,
                    readOnly: false  // 是否只读，默认为 false
                    },
                    magicType:{
                        type:['line','bar','stack','tiled'],
                        title:{                 //设置标题
                          //  line:'切换折线图',
                          //  bar:'切换柱状图',
                          //  stack:'切换堆积图',
                        }, 
                    },
                    saveAsImage: {
                        show: true,
                        title:'保存'
                    },
                }
            },
            series: [       //数据系别
                {
                    name:'肘关节',    //第一组
                    data: data1,
                    type: 'line'
                },
                {
                    name:'虚治病',    //第二组
                    data: data2,
                    type: 'line'
                },
                {
                    name:'牢大',    //第三组
                    data: data3,
                    type: 'line'
                },
                {
                    name:'小V',    //第四组
                    data: data4,
                    type: 'line'
                }
            ]
        }
        mCharts.setOption(option)
  </script>
</body>