通用配置 title

最新推荐文章于 2024-07-30 16:49:30 发布

生活热爱就好

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量194

点赞数

分类专栏：数据可视化文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_41891425/article/details/121185524

版权

数据可视化专栏收录该内容

13 篇文章 1 订阅

订阅专栏

通用配置

 通用配置指的是任何图表都能够使用的配置。
 标题：title
 （1）文字样式  textStyle
 （2）标题边框  boderWidth、borderColor 、boderRadius
 （3）标题位置  left、top、right、bottom

在这里插入图片描述
代码

 <!-- 
    1.ECharts最基本的代码结构
    2.x轴数据：['张三'，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
    3.y轴数据：[88,92,63,77,94,80,72,86]
    4.将type的值设置为bar
     -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script src="lib/echarts.min.js"></script>
     
   
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
    <script>
        var mCharts= echarts.init(document.querySelector('div'))
        var xDataArr=['张三','李四','王五','闰土','小明','茅台','二妞','大强']
        var yDaraArr=[70,92,85,89,77,90,87,98]
        var  option={
            title:{
                text:'成绩展示',
                textStyle:{
                    color:'blue'
                },
                borderWidth:5,
                borderColor:'blue',
                borderRadius:5,
                left:30,
                top:10
            },
           xAxis:{
               type:'category'  ,//类目轴
               data:xDataArr
               
           },
           yAxis:{
               type:'value'  ,//数值轴
              
           },
           series:[
               {
                   name:'语文',
                   type:'bar',   //bar是柱状图，line是线状，pie是饼状
                   markPoint:{   
                       data:[
                         {
                             type:'max',name:'最大值'
                         },{
                           type:'min',name:'最小值'
                         }
                      ]
                    },
                   markLine:{
                       data:[
                           {
                               type:'average',name:'平均值'
                           }
                       ]
                    },
                   label:{
                       show: true,
                       position:'top'
                    },
                       
                    barWidth:'30%',
                   data:yDaraArr
               }
           ]
        }
        //步骤5：将配置项设置给echarts实例对象  
        mCharts.setOption(option) 
     </script>
</body>
</html>

生活热爱就好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
通用配置 title

通用配置通用配置指的是任何图表都能够使用的配置。标题：title （1）文字样式 textStyle （2）标题边框 boderWidth、borderColor 、boderRadius （3）标题位置 left、top、right、bottom代码 <!-- 1.ECharts最基本的代码结构 2.x轴数据：['张三'，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’] 3.y轴数据：[88,92,63,77,94,80,7
复制链接

扫一扫