ECharts高级 显示相关

黑马程序员官方
企业官方账号
2023-02-14 18:34:46

1.1.显示相关

1.1.1.主题

默认主题

  • ECharts 中默认内置了两套主题: light dark
  • 在初始化对象方法 init 中可以指明

 

var chart = echarts.init(dom, 'light')

var chart = echarts.init(dom, 'dark')

自定义主题

1.在主题编辑器中编辑主题

主题编辑器的地址为: https://www.echartsjs.com/theme-builder/

在该地址中, 你可以定义一个主题的很多方面的内容:

 

2.下载主题, 是一个 js 文件

在线编辑完主题之后, 可以点击下载主题按钮, 下载主题的js文件

 

3.引入主题 js 文件

 

<script src="js/echarts.min.js"></script>

<script src="js/itcast.js"></script>

其中, itcast.js 就是下载下来的主题文件

4.在 init 方法中使用主题

var mCharts = echarts.init(document.querySelector("div"), 'itcast')

 

init方法中的第二个参数itcast就是主题的名称, 这个名称叫什么我们可以在itcast.js的代码中看出

 

1.1.2.调色盘

它是一组颜色,图形、系列会自动从其中选择颜色, 不断的循环从头取到尾, 再从头取到尾, 如此往复.

  • 主题调色盘

 

  • 全局调色盘

        全局调色盘是在 option 下增加一个 color 的数组
 

 

  • 局部调色盘

        局部调色盘就是在 series 下增加一个 color 的数组

 

需要注意一点的是, 如果全局的调色盘和局部的调色盘都设置了, 局部调色盘会产生效果, 这里面遵

循的是就近原则

  • 渐变颜色的实现

        在 ECharts 中, 支持线性渐变和径向渐变两种颜色渐变的方式

线性渐变

线性渐变的类型为 linear , 他需要配置线性的方向, 通过 x, y, x2, y2 即可进行配置 x , y , x2 , y2 , 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 global 为 true ,则该四个值是绝对的像素位置

在下述代码中的 0 0 0 1 意味着从上往下进行渐变

 

<!DOCTYPE html>

<html lang="en">

<head>

        <script src="js/echarts.min.js"></script>

</head>

<body>

        <div style="width: 600px;height:400px"></div>

        <script>

        var mCharts = echarts.init(document.querySelector("div"))

        var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大

强']

        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]

        var option = {

            xAxis: {

                type: 'category',

                data: xDataArr

              },

              yAxis: {

                    type: 'value'

                 },

                series: [

                     {

                        type: 'bar',

                        data: yDataArr,

                        itemStyle: {

                           color: {

                                type: 'linear',

                                x: 0,

                                y: 0,

                                x2: 0,

                                y2: 1,

                                colorStops: [{

                                  offset: 0, color: 'red' // 0% 处的颜色

                                }, {

                                  offset: 1, color: 'blue' // 100% 处的颜色

                                }],

                                globalCoord: false // 缺省为 false

                         }

                    }

              }

        ]

};

        mCharts.setOption(option)

                </script>

</body>

</html>

 

 

  • 径向渐变

线性渐变的类型为 radial , 他需要配置径向的方向, 通过 x , y , r 即可进行配置

前三个参数分别是圆心 x , y 和半径,取值同线性渐变

在下述代码中的 0.5 0.5 0.5 意味着从柱的重点点, 向外径向扩散半径为宽度一半的圆

 

 

1.1.3.样式

直接样式

  • itemStyle
  • textStyle
  • lineStyle
  • areaStyle
  • label

 这些样式一般都可以设置颜色或者背景或者字体等样式, 他们会覆盖主题中的样式

  • 高亮样式

图表中, 其实有很多元素都是有两种状态的, 一种是默认状态, 另外一种就是鼠标滑过或者点击形成

的高亮状态. 而高亮样式是针对于元素的高亮状态设定的样式

那它的使用也非常简单,在 emphasis 中包裹原先的 itemStyle 等等, 我们来试一下

 

series: [

        {

                type: 'pie',

                label: {

                        color: 'green'

                },

                emphasis: {

                        label: {

                                color: 'red'

                        },

                },

data: [{

        value: 11231,

        name: "淘宝",

        itemStyle: {

                color: 'black'

        },

        emphasis: {

                itemStyle: {

                        color: 'blue'

                },

        }

},

 

1.1.4.自适应

步骤1: 监听窗口大小变化事件

步骤2: 在事件处理函数中调用 ECharts 实例对象的 resize 即可

<!DOCTYPE html>

<html lang="en">

<head>

        <script src="js/echarts.min.js"></script>

</head>

<body>

        <div style=" height:400px;border:1px solid red"></div>

        <script>

        var mCharts = echarts.init(document.querySelector("div"))

        var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']

        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]

        var option = {

                xAxis: {

                        type: 'category',

                        data: xDataArr

                },

                yAxis: {

                        type: 'value'

                },

                series: [

                        {

                                type: 'bar',

                                data: yDataArr

                        }

                ]

        };

        mCharts.setOption(option)

        // 监听window大小变化的事件

        window.onresize = function () {

                // 调用echarts示例对象的resize方法

                mCharts.resize()

         }

        // window.onresize = mCharts.resize

        </script>

</body>

</html>

 

 往期文章:


 黑马前端专栏干货多多,关注再学,好方便~

2023年前端学习路线图:课程、源码、笔记,技术栈 另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我喔~

...全文
96 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

10,230

社区成员

发帖
与我相关
我的任务
社区描述
传智教育旗下高端IT教育品牌,中国“教育行业A股IPO第一股” 1100多位专职教研以及教学团队,已发教程12万余节,年均下载及播放量4000万余次。源码、教材、项目,均会放送。
mysql分布式架构 企业社区
社区管理员
  • 黑马程序员官方
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

传智教育旗下高端IT教育品牌,中国“教育行业A股IPO第一股” 1100多位专职教研以及教学团队,已发教程12万余节,年均下载及播放量4000万余次。源码、教材、项目,均会放送。

试试用AI创作助手写篇文章吧