eCharts笔记

最新推荐文章于 2024-05-12 14:23:18 发布

你六我里六六

最新推荐文章于 2024-05-12 14:23:18 发布

阅读量246

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_53874202/article/details/126805076

版权

笔记

// 1.超出文字隐藏
 axisLabel: {
  formatter: function (params) {
    let val = ''
    if (params.length > 4) {
      val = params.substr(0, 4) + '...'
      return val
    } else {
      return params
    }
  }
}

// 2.柱状图给不一样的色值
itemStyle: {
	normal: {
		color: function (params) {
			let colorList = [#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
			return colorList[params.dataIndex]
		}
  }
}

// 3.X轴超出加滚动
dataZoom: [
  {
    type: 'slider',
    show: true,
    xAxisIndex: [0],
    start: 0,
    // 两头文字
    textStyle: {
      color: 'rgba(0, 0, 0, 0)'
    },
    top: '95%',
    endValue: 5,
    // 固定滑动宽度
    zoomLock: true
  }
]

// 4.eCharts图表自适应
if (option) {
	option && myChart.setOption(option)
}
window.onresize = myChart.resize

// 5.饼图颜色设置
// 5.1option中直接配置color
let option = {
	color: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc']
}
// 5.2itemStyle中配置
let option = {
	series: [
		{
			type: 'pie',
			itemStyle: {
				normal: {
					color: function (params) {
						let colorList = ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc']
						return colorList[params.dataIndex]
					}
				}
			}
		}
	]
}

// 6.环形图中间加图片
import Image from './assets/img/img.png'
graphic: {
  elements: [
    {
      type: 'image',
      style: {
        image: Image,
        width: 120,
        height: 120
      },
      left: 'center',
      top: '40%'
    }
  ]
}