vue使用echarts总结

总结在使用echarts给表格修改自定义样式

1.图例属性

legend: {
   x: 'right', //坐标位置
   textStyle: {//图例字体的颜色
       color: "#ffffff",
       fontSize:16 //设置字体大小
   },
   orient: 'vertical',//图例水平位置 vertical为垂直 默认是水平 horizontal
   itemWidth:16,//设置图例 宽度
   itemHeight:10,//设置图例高度
   left:'60%', //设置位置 居中 center 居左 left 居右 right
   data:['备货总金额','消耗总金额'], //图例数据
   icon:"square" //设置图例形状 有原型 正方形 长方形
 },

2、title 标题属性

title:{
  text:'上个月各科室备货、消耗总金额(元)',//标题内容
  textStyle: { //标题字体颜色大小
      color: '#F2F2F2'
  },
  left:'10%',//设置标题坐标位置
  top:'5%',
  padding:[20,20,30,30],//设置title位置
},

3、x轴刻度线属性

xAxis: { 
  show: false,// 是否显示x轴
  type: 'category',//坐标轴类型（value、category）
  data: ['2021-11', '2021-12', '2022-01', '2022-02', '2022-03', '2022-04'],//x轴数据
  axisLine: {//x轴线的颜色以及宽度
	  show: true,//　是否显示坐标轴轴线
	  lineStyle: {
	      color: "#6B7C96",//坐标轴线的颜色
	      width: 0, //坐标轴线线宽
	      type: "solid" //坐标轴线的类型 solid实现 dotted点状 dashed 虚线状 
	  },
	  symbol:['none','arrow']//轴线两端箭头 两个值 none代表没有肩头 arrow代表有箭头
  },
  axisLabel: {//x轴文字的配置
  	width:100,//文字容器宽度
  	overflow:'none',//文字超出宽度是否截断或者换行
  	show:true,//是否显示刻度标签
    textStyle: {
        color: "#87BAF8", //坐标文字颜色
        fontSize:10 //坐标轴文字大小
    },
    interval: 0,//X轴信息全部展示 x轴坐标轴刻度标签显示间隔
    rotate : 60 //字体倾斜
  },
  splitLine:{
  	show:true,//是否显示刻度线
  	color:['#fff'],//分割线颜色
  },
  axisTick: {
      show: false, // 隐藏坐标轴的刻度线
      alignWithLabel: true, // 图形于标题居中
      inside: true, // 刻度线是指向内部还是外部
      length: 0, // x轴上指向标题刻度线的长度
  },

4、y轴属性（同理x轴参照）
5、series 属性

series:[
	{
		type: 'bar', //图形类型
		radius: ['30%', '50%'],//如果是饼图 这里可以设置饼图的大小 外圈和内圈
		itemStyle:{
	        normal:{
                barBorderRadius:[0, 7, 7, 0],//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
	            color: new echarts.graphic.LinearGradient(
	                0, 0, 0, 1,
	                [
	                    {offset: 0, color: '#16F6EA'},//柱图渐变色
	                    {offset: 1, color: '#0B2A60'},//柱图渐变色
	                ]
	            )
	         },
	         label: { //如果是饼图可以通过normal来设置饼图中间文字属性
	          	show: true,
	            position: 'top',
	            color:'#fff',
	            normal:{
	                show: false,
	                position: 'center',
	                color:'#F2F2F2',
	                textStyle:{
	                    fontSize:16
	                }
	                // formatter: '总金额 10000.00元',
	           }
	     },
	     data: [
             {value: 1000, name: '低值耗材'},
             {value: 500, name: '高值耗材'},
             {value: 300, name: '检验试剂'},
             {value: 200, name: '药品'},
             {value: 100, name: '后勤物资'}
         ],
	     barWidth:14//柱状的宽度
     },
	}
]

如果有多个柱状 并且每个柱状的颜色都不一样都是渐变 那么就设置下面的属性

color:function(params){
    var colorList=[
        ['#F28E26','#FD644F'],
        ['#F7CB6B','#FBA980'],
        ['#4FACFE','#00F2FE'],
        ['#4FACFE','#00F2FE'],
        ['#4FACFE','#00F2FE'],
        ['#4FACFE','#00F2FE'],
        ['#4FACFE','#00F2FE'],
        ['#4FACFE','#00F2FE']
    ];
    var colorItem = colorList[params.dataIndex];
    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: colorItem[0]
        },
        {
            offset: 1,
            color: colorItem[1]
        }
    ], false);
}

echarts 记得在当前页面引入 import echarts from ‘echarts’;