Echarts数据可视化第3章 Echarts组件详解 3.10 全局字体样式

刺骨的言语ヽ痛彻心扉 2024-03-26 16:53 22阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第3章 Echarts组件详解
         *   *  3.10 全局字体样式

> Echarts数据可视化：入门、实战与进阶

#### 第3章 Echarts组件详解 ####

##### 3.10 全局字体样式 #####

全局字体样式 textStyle 中，可以定义全局的字体样式显示，常用参数：

*  color：文字的颜色
 *  fontStyle：文字字体的风格
    
     *  normal
     *  italic
     *  oblique
 *  fontWeight：字体粗细
    
     *  normal
     *  bold
     *  bolder
     *  lighter
     *  100
     *  200
     *  …
 *  fontFamily：字体系列
    
     *  sans-serif
     *  serif
     *  monospace
     *  Arial
     *  Courier New
     *  Microsoft YaHei
     *  等
 *  fontSize：字体大小。数值

举个栗子：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>全局字体样式</title>
        
        <script src="../js/echarts.js"></script>
    </head>
    <body>
    
    <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: '这是副标题',
                left: 'center' // 居中对齐
            },
            tooltip: {
          },
            legend: {
          
                data: ['各产品销量情况']
            },
            xAxis: {
          
                data: ["产品A", "产品B", "产品C", "产品D", "产品E"]
            },
            yAxis: {
          },
    
            textStyle: {
          
                color: 'blue',
                fontWeight: 'bolder',
                fontFamily: 'Microsoft YaHei'
            },
    
            series: [{
          
                name: '销量',
                type: 'bar',
                data: [900, 700, 550, 1000, 200]
            }]
        };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>
    </html>

浏览器渲染效果

没有加样式的样子

![在这里插入图片描述][be3b98b375b44da799b1fda4d5030d56.png_pic_center]

加上：

![在这里插入图片描述][e59cd7ba1b6b4830a0928ffebe206571.png_pic_center]

[be3b98b375b44da799b1fda4d5030d56.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f5937f94d7484ee682dcacf0de77911e.png
[e59cd7ba1b6b4830a0928ffebe206571.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9b5d152db68847739ea8f7d112f18da8.png