Echarts图例组件（滚动效果），和添加工具箱组件，插入图片

最新推荐文章于 2024-06-08 21:17:27 发布

小白学data

最新推荐文章于 2024-06-08 21:17:27 发布

阅读量546

点赞数 8

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_68473774/article/details/136996770

版权

添加图例组件（滚动效果）

legend:{
                height: 20, // 图片的高度
                width: 20,   // 图片的宽度
                data:['广州','深圳','上海','北京'],
                type: 'scroll',     // 添加滚动图例类型
                width: '30%',       // 设置图例的宽度
                orient: 'horizontal' // 设置图例水平排列
            }

添加工具箱组件

toolbox:{       //工具箱
                show: true, 
                feature:{
                    dataView: {  // 添加 dataView 功能
                    show: true,
                    readOnly: false  // 是否只读，默认为 false
                    },
                    magicType:{            //设置标题
                        type:['line','bar','stack','tiled'],
                    },
                    saveAsImage: {
                        show: true,
                        title:'保存'
                    },
                }
            },

插入图片（这里的URL 地址一点长）

 graphic: [      //插入图片
            {
        type: 'image',       //指定一个名称
        style: {
            //有的浏览器的安全策略限制，不能直接在 ECharts 中使用本地文件路径，包括绝对路径，作为图片的引用。
            image: "https://ts1.cn.mm.bing.net/th/id/R-C.14a37763e63fdb21f0df03189d2d8844?rik=kUtSrM1ge%2bIf8Q&riu=http%3a%2f%2fimg.juzhiyuan.com%2fstatic%2fimages%2fsch_logos%2f4808.jpg&ehk=szjcDpGdjeXLOlkoPxPYVN1t2ZQjh2lL7LQ3brhHn94%3d&risl=&pid=ImgRaw&r=0", // 图片的路径，可以是相对路径或绝对路径
            width: 30,     //宽度
              },
            left: '23%',    //向左偏离量
            }
          ],

例题代码


<!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: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    var datax=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        //四条数据
        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://ts1.cn.mm.bing.net/th/id/R-C.14a37763e63fdb21f0df03189d2d8844?rik=kUtSrM1ge%2bIf8Q&riu=http%3a%2f%2fimg.juzhiyuan.com%2fstatic%2fimages%2fsch_logos%2f4808.jpg&ehk=szjcDpGdjeXLOlkoPxPYVN1t2ZQjh2lL7LQ3brhHn94%3d&risl=&pid=ImgRaw&r=0", // 图片的路径，可以是相对路径或绝对路径
            width: 30,     //宽度
              },
            left: '23%',    //向左偏离量
            }
          ],
            title:{
                text:'城市降水量',
                subtext:'毫升(Lm)'
            },
            legend:{
                height: 20, // 图片的高度
                width: 20,   // 图片的宽度
                data:['广州','深圳','上海','北京'],
                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:'北京',    //第四组
                    data: data4,
                    type: 'line'
                }
            ]
        }
        mCharts.setOption(option)
  </script>
</body>