用vscode绘制条形图和折线图

啊啊啊脑子要没了

已于 2024-03-11 18:44:37 修改

阅读量1.7k

点赞数 14

文章标签：数据可视化

于 2024-03-11 18:38:50 首次发布

本文链接：https://blog.csdn.net/z912631832/article/details/136631138

版权

以绘制条形图为例

可以分为五大步骤

第一步：首先引入ECharts脚本

第二步：有了脚本后，就可以为ECharts准备一个具备大小或者宽高的DOM，我们俗称为容器

第三步：准备好DOM后，我们就要初始化Echarts图表了

var myChart = echarts.init(document.getElementById("main"));

第四步，我们可以开始编写最主要的身体部分了

第五步：使用刚指定的配置项和数据显示图表

这五步完成我们就做完了，运行看结果就可以了

折线图99%和条形图是一样的，我们只需把第四步里的bar改为line就可以了，因为我们是条形图所以要把x、y调换一下就ok了

最后的效果图如下

全部代码如下

条形图

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '它是主标题',
                subtext: '它是副标题',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['成绩1', '成绩2'],
            },
            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.1],
                },
            ],
            yAxis: [
                {
                    type: 'category',
                    data: ['小明', '小黄', '小红', '小蓝'],
                },
            ],
            series: [
                {
                    name: '成绩1',
                    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: [66, 55, 85, 77],
                },
                {
                    name: '成绩2',
                    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: [90, 68, 53, 30],
                },
            ],
        };
        myChart.setOption(option);
    </script>
</body>
</html>

折线图

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '它是主标题',
                subtext: '它是副标题',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['成绩1', '成绩2'],
            },
            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.1],
                },
            ],
            xAxis: [
                {
                    type: 'category',
                    data: ['小明', '小黄', '小红', '小蓝'],
                },
            ],
            series: [
                {
                    name: '成绩1',
                    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: [66, 55, 85, 77],
                },
                {
                    name: '成绩2',
                    type: 'line',
                    markPoint: { 
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { 
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { 
            show: true, 
            rotate: 60, 
            position: 'top' 
          },
                    data: [90, 68, 53, 30],
                },
            ],
        };
        myChart.setOption(option);
    </script>
</body>
</html>