echarts单独给某一列加阴影

在echarts柱状图中,有些需求,需要给单独某类因子添加背景,以凸显数据。

option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    barCategoryGap: 54,
    barGap: 50,

   
   markArea: {
                        label: {
                          color: '#000',
                          offset: [0, -10]
                        },
                        itemStyle: {
                          color: '#a8d5fe'
                        },
                        z:-1,
                        data: [
                          [
                            {
                              name: '',
                              xAxis: 'Sun'
                            },
                            {
                              xAxis: 'Sun'
                            }
                          ]
                        ]
                      }
  }]
}

根据提供的引用内容,可以使用ECharts的柱状图(bar)系列来绘制单独一个柱子的图表。具体步骤如下: 1. 首先需要引入ECharts的js文件和主题文件,例如: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/theme/macarons.js"></script> ``` 2. 创建一个具有宽度和高度的DOM元素,例如: ```html <div id="chart" style="width: 600px; height: 400px;"></div> ``` 3. 使用ECharts的初始化函数初始化图表实例,例如: ```javascript var chart = echarts.init(document.getElementById('chart'), 'macarons'); ``` 4. 配置图表的基本信息,例如: ```javascript var option = { title: { text: '单独一个柱子的图表' }, xAxis: { data: ['柱子名称'] }, yAxis: {}, series: [{ name: '柱子名称', type: 'bar', data: [柱子高度], itemStyle: { normal: { color: '#4ad2ff' } } }] }; ``` 其中,xAxis表示横轴,yAxis表示纵轴,series表示系列,name表示系列名称,type表示系列类型,data表示系列数据,itemStyle表示系列样式。 5. 将配置项设置到图表实例中,例如: ```javascript chart.setOption(option); ``` 完整的代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>单独一个柱子的图表</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/theme/macarons.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> var chart = echarts.init(document.getElementById('chart'), 'macarons'); var option = { title: { text: '单独一个柱子的图表' }, xAxis: { data: ['柱子名称'] }, yAxis: {}, series: [{ name: '柱子名称', type: 'bar', data: [10], itemStyle: { normal: { color: '#4ad2ff' } } }] }; chart.setOption(option); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值