visual绘制柱状图和折线图对比

x11__111

于 2024-03-13 16:06:10 发布

阅读量488

点赞数 8

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

本文链接：https://blog.csdn.net/x11__111/article/details/136633184

版权

1.引入echarts脚本

2、为ECharts准备一个具备大小（宽高）的DOM

3、基于准备好的DOM，初始化ECharts图表，结构要弄清楚

4、设置标题

5，设置动态触发器

6，编辑触发效果

7，设置x轴和y轴

8，设计平均值，最小值，最大值还有图表类型

9，使用指定的配置项和数据显示图表

效果图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '高度',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['东边的山', '西边的山'],
            },

            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            calculable: true,
            xAxis: [
                {
                    type: 'value',  //设置柱状图
                    boundaryGap: [0, 0.01],
                },
            ],
            yAxis: [
                {
                    type: 'category',
                    data: ['A山', 'B山', 'C山', 'D山',],
                },
            ],
            series: [
                {
                    name: '东边的山',
                    type: 'bar',
                    markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度

                    data: [18203, 23489, 29034, 104970],
                },
                {
                    name: '西边的山',
                    type: 'bar',
                    markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度

                    data: [10000, 25000, 40000, 84840],
                },
                
            ],
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>

10，折线图对比条形图只需要修改type，改变图表类型，再将x轴与y轴的数据进行对调

运行图

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '高度',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['东边的山', '西边的山'],
            },

            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            calculable: true,
            yAxis: [
                {
                    type: 'value',  //设置柱状图
                    boundaryGap: [0, 0.01],
                },
            ],
            xAxis: [
                {
                    type: 'category',
                    data: ['A山', 'B山', 'C山', 'D山',],
                },
            ],
            series: [
                {
                    name: '东边的山',
                    type: 'line',
                    markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度

                    data: [18203, 23489, 29034, 104970],
                },
                {
                    name: '西边的山',
                    type: 'line',
                    markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度

                    data: [10000, 25000, 40000, 84840],
                },
                
            ],
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>