echart柱状条根据不同数据显示不同颜色

series: [{
          data: [100, 80, 60, 40, 20, 90, 70],
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            normal: {
              color: function (value) {
                console.log('颜色这里')
                let vv = value.value
                console.log(vv)
                if (vv >= 80) {
                  return 'red'
                }
                else if (vv >= 60) {
                  return 'yellow'
                }
                else {
                  return 'green'
                }
              }
            }
          }
        }]
### 在 el-table 中通过 ECharts 实现柱状图展示数据分布 在 Vue 项目中,使用 `el-table` 和 ECharts 结合实现柱状图展示数据分布是一个常见的需求。以下是具体的实现方法: #### 1. 动态生成 ECharts 容器 为了在表格的每一行中嵌入一个柱状图,需要为每个表格单元格动态生成一个 ECharts 容器。可以通过 `v-for` 循环为每个单元格绑定唯一的 `id` 或 `ref`,以便后续初始化 ECharts 图表。 ```html <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="name" label="名称" width="180"></el-table-column> <el-table-column label="数据分布" width="300"> <template #default="scope"> <div :id="'chart' + scope.$index" class="echarts-container" style="height: 100px; width: 100%;"></div> </template> </el-table-column> </el-table> ``` #### 2. 初始化 ECharts 图表 在 Vue 的生命周期钩子中(如 `mounted`),遍历表格数据并为每个容器初始化 ECharts 图表。可以使用 `this.$nextTick` 确保 DOM 已经渲染完成。 ```javascript export default { data() { return { tableData: [ { name: "类别A", values: [12, 34, 56] }, { name: "类别B", values: [23, 45, 67] }, { name: "类别C", values: [34, 56, 78] } ] }; }, mounted() { this.initEcharts(); }, methods: { initEcharts() { this.tableData.forEach((item, index) => { const chartId = "chart" + index; const chartDom = document.getElementById(chartId); if (chartDom) { const myChart = this.$echarts.init(chartDom); const option = { tooltip: { trigger: "axis" }, xAxis: { type: "category", data: ["标签1", "标签2", "标签3"] }, yAxis: { type: "value" }, series: [ { data: item.values, type: "bar", itemStyle: { color: function(params) { // 设置柱状颜色,特殊数据固定为黑色 if (params.value > 50) { return "black"; } else { return ["red", "blue", "green"][params.dataIndex % 3]; } } } } ] }; myChart.setOption(option); } }); } } }; ``` #### 3. 样式调整 确保每个 ECharts 容器的高度和宽度适配表格单元格大小,并避免样式冲突。 ```css .echarts-container { height: 100px; width: 100%; } ``` #### 注意事项 - 每个 ECharts 容器需要有唯一的 `id` 或 `ref`,以确保图表正确初始化[^1]。 - 使用 `$nextTick` 确保 DOM 渲染完成后再初始化图表,避免因 DOM 未准备好导致的错误[^2]。 - 在 `tooltip` 配置中可以进一步增强交互体验,例如显示详细数据信息[^3]。 ```python # 示例代码块,用于说明其他语言相关的内容(如果需要) print("Hello World") ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值