案例半成品

23_123456

已于 2024-03-25 08:58:46 修改

阅读量154

点赞数 1

文章标签：前端 javascript 开发语言

于 2024-03-25 08:04:15 首次发布

本文链接：https://blog.csdn.net/2202_75544053/article/details/136883529

版权

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '表',
                subtext: '表2',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {  //设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow'  //设置坐标轴默认为直线，可选为:'line'|'shadow'
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            dataZoom: {
                show: false,
            type: 'slider',
            xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x轴
            // 数据窗口范围的起始和结束百分比  范围: 0 ~ 100
            start: 0,
            end: 100
            },
            legend: {
                data: ['销量'],
            },
			xAxis:{
                type: 'category',
				data:["红枣","草莓","柠檬","香蕉","车厘子","雪梨"]
			},
            yAxis:{
                type:'value',
            },
			series:[{
				name:"销量",
                type:'line',
                data:[5,12,18,10,15,19] 
			}],
            
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

添加工具箱组件

toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },

图例滚动

legend:{
                height: 20, // 图片的高度
                width: 20,   // 图片的宽度
                data:['十个勤天', '种地吧','十个男人们'],
                type: 'scroll',     // 添加滚动图例类型
                width: '30%',       // 设置图例的宽度
                orient: 'horizontal' // 设置图例水平排列
            },