echarts图表的一些通用配置

最新推荐文章于 2022-08-04 22:45:32 发布

慢慢来的小邵

最新推荐文章于 2022-08-04 22:45:32 发布

阅读量589

点赞数 1

分类专栏： vue_study 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/m0_44946030/article/details/121322057

版权

vue_study 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何在VSCode中利用Echarts库创建图表的步骤，包括下载Echarts.min.js，引入到HTML文件，声明图表容器，配置x轴、y轴及系列数据，最后展示了一个包含条形图的完整示例代码。

摘要由CSDN通过智能技术生成

画图步骤

目前只是在vscode中通过html看效果，稍后会通过vue来实现
1.首先在echarts官网下载echarts.min.js
2.在html中导入echarts
3.为图表声明一个空间
4.根据div的id声明一个图表
5.为图表配置x,y轴以及相关数据（主要的有xAxis，yAxis,series）

相关代码

<!DOCTYPE html>
<html>
    <head>
        <meta chartset='UTF-8'>
        <title>echarts</title>
        <script src="lib/echarts.min.js"></script>
    </head>
    <body>
        <!-- 给图表定义一个位置 -->
        <div style="width:600px;height:400px"></div>
    </body>
    <script>
        //初始化图表
        var mCharts=echarts.init(document.querySelector('div'))
        //x轴
        var xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        //y轴
        var yData=[75, 83, 84, 98, 55, 67, 60]
        var yData2=[40,100,90,87,100,99,80,70]
        //表格的配置
        var option= {
            //一个横坐标有多个纵坐标
            legend:{
             data:['语文','数学']
            },
            //设置标题
            title:{
             text:'成绩',
             textStyle:{
               color:'black'
             },
             borderWidth:5,
             borderColor:'blue',
             borderRadius:5,
             left:50,
             top:10
            },
            //设置点击反应
            tooltip:{
            trigger:'axis',
            triggerOn:'click',
            // formatter:'{b}的数量是：{c}'
            formatter:function(arg){
                console.log(arg)
                return arg[0].name+'的数量是:'+arg[0].data
            }
            },
            //设置图标的额外功能,工具按钮
            toolbox:{
                feature:{
                    saveAsImage:{},//导出图片
                    dataView:{},//数据视图
                    restore:{},//重置
                    dataZoom:{},//区域缩放
                    //多个图标切换
                    magicType:{
                        type:['bar','line']
                    }
                },
            

            },
            //设置x轴
            xAxis: {
              type: 'category',
              data: xData
            },
            //设置y轴
            yAxis: {
              type: 'value'
            },
            //y轴数据以及相关配置
            series: [
              {
                name:'语文',
                data:yData,
                type: 'bar',
                markPoint:{
                //设置最大值最小值
                data:[
                    {type:'max',name:'最大值'},
                    {type:'min',name:'最小值'}
                    ]
                },
            //设置平均线
            markLine:{
            data:[
                {type:'average',name:'平均值'}
              ]
          },
          //设置柱子上的数字是否显示，角度，以及数字的位置
          label:{
              show:true,
              rotate:60,
              position:'top'

          },
          //设置柱子的宽度
          barWidth:'30%'
          },
              {
                  name:'数学',
                  type:'bar',
                  data:yData2
              }
  ]
}
mCharts.setOption(option)
    </script>
</html>