echarts图形样式的控制

最新推荐文章于 2024-08-07 09:00:00 发布

原创最新推荐文章于 2024-08-07 09:00:00 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

Echarts 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了ECharts中grid布局、series配置项如line、area样式调整、xAxis与yAxis轴配置、dataset数据集使用及自定义series等内容，帮助读者掌握高级图表定制技巧。

grid: {
  top: 0,
  bottom: 0,
  left: 0,
  right: 0
}
控制每个图形的位置。可以是多个图形。
===================================================
series: [{
  type: 'line',
  data: this.orderTrend,
  areaStyle: {
    color: 'purple'
  },
  lineStyle: {
    width: 0
  },
  itemStyle: {
    opacity: 0
  },
  smooth: true
}]
以折线图为例：areaStyle，控制直线变为面积图的样式，smooth,如图形更加圆滑。
lineStyle,控制线条的样式；
itemStyle,控制每个点的样式。
===================================================
xAxis: {
  type: 'category', // 类目，一个值对应一种类型；控制图形的横向、竖向展示。
  show: false,// 控制是否显示
  boundaryGap: false// 默认图形两边会有间距，设置为false,取消间距
},
===================================================
dataset，数据集的使用。
===================================================
stack: '总量',
数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
===================================================
自定义系列，custom的使用
var option = {
    ...,
    series: [{
        type: 'custom',
        renderItem: function (params, api) {
            // ...
        },
        data: data
    }]
}
===================================================
VueEcharts，v-charts
===================================================
yAxis: {
 axisLine: {
    show: false
  },// 轴线是否显示
  axisTick: {
    show: false
  },// 轴线上的小短线是否显示
  splitLine: {
    lineStyle: {
      type: 'dotted', // 虚线显示
      color: '#eee'
    }
  }// 直角坐标系中的背景
},
===================================================
{
   name: '品类分布',
   type: 'pie',
   data: chartData,
   label: {
     normal: {
       show: true,
       position: 'outter',
       formatter: function (params) {
         return params.data.legendname
       }
     }
   },
   center: ['35%', '50%'],
   radius: ['45%', '60%'],
   labelLine: { // 控制饼图的延长线
     normal: {
       length: 5,
       length2: 3,
       smooth: true // 延长线更加圆润
     }
   },
   clockwise: false,// 饼图数据是否按顺时针、逆时针展示
   itemStyle: {
     borderWidth: 4, // 饼图间距设置
     borderColor: '#fff'
   }
 }