Echarts 设置数据条颜色 宽度

简介: Echarts 设置数据条颜色 宽度

设置数据条颜色(推荐)

let yData = [
          {
            value: 500,
            time: '2012-11-12',
            itemStyle: //设置数据条颜色
            {
              normal: { color: 'red' }
            }
          },
          {
            value: 454,
            time: '2020-5-17'
          },
          {
            value: 544,
            time: '2022-1-22'
          },
          {
            value: 877,
            time: '2013-1-30'
          }, {
            value: 877,
            time: '2012-11-12'
          }]


设置数据条颜色2 (不推荐)

itemStyle:
                {
                  normal: {
                    color: pamars => {
                      let colorList = ['red', 'yellow', 'blue', 'green', 'pink']
                      return colorList[pamars.dataIndex]
                    }
                  }
                }


设置轴的宽度

series:   [
             {
                name: '图例',
                type: 'bar',//图表类型
                data: yData,//图标数据
                barWidth: 25//数据条宽度
              }
            ]

完整配置

draw() {
        let xData = ['华为', '小米', '苹果', '三星', '酷派']
        let yData = [{
          'value': '500',
          'time': '2012-11-12'
        },
        {
          'value': '454',
          'time': '2020-5-17'
        },
        {
          'value': '544',
          'time': '2022-1-22'
        },
        {
          'value': '877',
          'time': '2013-1-30'
        }, {
          'value': '877',
          'time': '2012-11-12'
        }]
        const myChart = this.$echarts.init(this.$refs.myChart)
        //初始化对象
        myChart.setOption({ //参数配置项
          legend: {
            show: true, //是否展示图例 
          }
          , xAxis://设置x轴数据
          {
            type: 'value'
            //设置数据
          }, yAxis://设置y轴数据
          {
            data: xData,
            type: 'category'
          }, series:
            [
              {
                name: '图例',
                type: 'bar',//图表类型
                data: yData,//图标数据
                barWidth: 25,//数据条宽度
                itemStyle:
                {
                  normal: {
                    color: pamars => {
                      let colorList = ['red', 'yellow', 'blue', 'green', 'pink']
                      return colorList[pamars.dataIndex]
                    }
                  }
                }
              }
            ]
        })
      }


相关文章
|
14天前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
80 1
|
2月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
114 23
echarts地图数据信息流向图效果
|
17天前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
30 2
|
14天前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
218 0
|
14天前
|
JSON JavaScript 定位技术
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
36 0
|
2月前
echarts中使用散点scatter更改颜色却不生效的问题
本文讨论了在ECharts中使用散点图(scatter)时更改颜色不生效的问题。原因是项目中使用了`visualMap`组件,它具有最高的优先级,导致自定义的颜色设置被覆盖。解决方法是在`visualMap`组件中增加`seriesIndex`属性,指定它只对特定的系列(series)生效,从而避免影响散点图的颜色设置。文章提供了详细的代码示例和解决办法。
56 2
|
18天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
44 1
|
14天前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
89 0
|
2月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
3月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
408 1
微信小程序使用echarts图表(ec-canvas)

热门文章

最新文章