Echarts

最新推荐文章于 2025-03-19 17:58:06 发布

晚风yY

最新推荐文章于 2025-03-19 17:58:06 发布

阅读量1.1k

点赞数

分类专栏： Echarts

本文链接：https://blog.youkuaiyun.com/m0_55689351/article/details/116784480

版权

Echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了ECharts的概述、安装方法，以及如何创建基本实例。深入探讨了饼图的配置，包括阴影设置和样式调整。同时，提到了ECharts的数据异步加载、数据集、交互组件和事件处理，展示了其在数据可视化中的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts是什么

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 遵循 Apache-2.0 开源协议，免费商用。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

ECharts 安装

独立版本

https://cdn.staticfile.org/echarts/4.7.0/echarts.js

使用 CDN 方法

https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

NPM 方法

npm install echarts --save

基本实例

// 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });

配置语法

第一步：创建 HTML 页面，引入 echarts.min.js

第二步: 为 ECharts 准备一个具备高宽的 DOM 容器

第三步: 设置配置信息（ECharts 库使用 json 格式来配置）

title 图表配置标题

tooltip 提示信息

legend 图例组件

xAxis X 轴

yAxis Y 轴

series 系列列表（每个系列通过 type 决定自己的图表类型）

完整实例

 // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
 
 // 指定图表的配置项和数据
 var option = {
     title: {
         text: '第一个 ECharts 实例'
     },
     tooltip: {},
     legend: {
         name: '系列1',
     // 强制设置图形为圆。
     icon: 'circle',
     // 设置文本为红色
     textStyle: {
         color: 'red'
       }
     },
     xAxis: {
         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
     },
     yAxis: {},
     series: [{
         name: '销量',
         type: 'bar',
         data: [5, 20, 36, 10, 10, 20]
     }]
 };
 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);

ECharts 饼图

饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要 xAxis，yAxis。

// 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  myChart.setOption({
    series: [{
        name: '访问来源',
        type: 'pie',    // 设置图表类型为饼图
        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
        data: [          // 数据数组，name 为数据项名称，value 为数据项值
          { value: 235, name: '视频广告' },
          { value: 274, name: '联盟广告' },
          { value: 310, name: '邮件营销' },
          { value: 335, name: '直接访问' },
          { value: 400, name: '搜索引擎' }
        ]}
    ]
  })

可以通过设置参数 roseType: 'angle' 把饼图显示成南丁格尔图

ECharts 饼图-阴影的配置

itemStyle 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等

 option = {
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        data: [
          { value: 235, name: '视频广告' },
          { value: 274, name: '联盟广告' },
          { value: 310, name: '邮件营销' },
          { value: 335, name: '直接访问' },
          { value: 400, name: '搜索引擎' }
        ],
        roseType: 'angle',
        itemStyle: {
          normal: {
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
  };

ECharts 样式设置

ECharts 可以通过样式设置来改变图形元素或者文字的颜色、明暗、大小等

颜色主题

ECharts4 开始，除了默认主题外，内置了两套主题，分别为 light 和 dark

var chart = echarts.init(dom, 'light’);
 或者 
var chart = echarts.init(dom, 'dark');

另外，我们也可以在官方的主题编辑器选择自己喜欢的主题下载

目前主题下载提供了 JS 版本和 JSON 版本。

如果你使用 JS 版本，可以将 JS 主题代码保存一个主题名.js 文件，然后在 HTML 中引用该文件，最后在代码中使用该主题。

如果主题保存为 JSON 文件，那么可以自行加载和注册。

//主题名称是 wonderland
  $.getJSON('https://www.runoob.com/static/js/wonderland.json', function (themeJSON) {
    echarts.registerTheme('wonderland', themeJSON)
    var myChart = echarts.init(document.getElementById('main'), 'wonderland');
 }

ECharts 样式设置-调色盘

调色盘可以在 option 中设置。

调色盘给定了一组颜色，图形、系列会自动从其中选择颜色。

可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

ECharts 样式设置-高亮时的样式

//基于准备好的om,初始化 echarts实例
var my Chart= echarts init(document. getElementById( main))
my Chart. setoption((
serles
name:'访问来源
设置图表类型为饼图
55%
饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的55%长度
emphasis
itemStyle
//高亮时点的颜色
co⊥or
label
show: true
//高亮时标签的文字
formatter:高亮时显示的标签内容
/数据数组,name为数据项名称, value为数据项值
value:235,name:"视频广告’}
value:274,name:"联盟广告’},
value:310,name:邮件营销'}
value:335,name:直接访问
value:400,name:"搜索引擎