美文网首页
2.echarts配置

2.echarts配置

作者: 半生_温暖纯良_Junzer | 来源:发表于2020-06-30 09:51 被阅读0次

2.饼图有颜色部分

series: [  // 数据
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'], // 饼图有颜色部分
            label: {
              normal: {
                formatter: '{b}'
              }
            },
环形

3.自定义显示模块

series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 1548,
                name: '幽州'
                 label: {  // 自定义显示模块
                formatter: [
自定义显示模块

4.文字标识部分

颜色的设置
https://blog.csdn.net/qiudechao1/article/details/97628338
position位置
https://blog.csdn.net/qq_34908167/article/details/78500921
文字省略
https://echarts.apache.org/zh/option.html#series-pie.label.formatter
文字始终在echarts内
https://segmentfault.com/q/1010000010939022

label: {
              color: "#fff",
              fontSize:14,
              position: 'outer',
              alignTo: 'edge',
              margin: 10,

样式rich fontSize
https://blog.csdn.net/u010976347/article/details/81390107

rich: {
                  a: {
                    fontSize: 16,
                    fontWeight: 'normal',
                    color: '#fff'
                  }
                },
                textStyle: {
                  fontSize: 20,
                  fontWeight: 600
                }

\n换行

  series: [
          {
            name: '从业人员性别',
            type: 'pie',
            radius: ['50%', '70%'], // 饼图有颜色部分
            label: {
              normal: {
                formatter: '{b}\n{d}',
                textStyle: {
                  fontSize: 16,
                  color: '#fff'
                }
              }
            },
position: ['320', '12'],
series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: { // 文字提示部分
              show: false,
              position: 'center',
              normal: {
                formatter: '{b}%'
              }
            },
文字标识部分

5.鼠标移入

  emphasis: { // 鼠标移入
              label: {
                show: true
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
鼠标移入

6.文字标识移入中间显示

初始没有文字标识

   label: { // 文字标识部分
              show: false,
              position: 'center'
            //   normal: {
            //     formatter: '{b}'
            //   }
            },
文字标识移入中间显示

7.工具栏

  toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
                show: true,
                type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
工具栏

8.图的位置

series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [30, 110],
            center: ['75%', '50%'], // 图的位置
            roseType: 'area',
            data: [
图的位置

9.指示线长度

  labelLine: { // 指示线
              normal: {
                length: 50
              }
            },
            data: [
指示线长度

10.排序

 yAxis: [{
          type: 'category',
          data: ['OPPO R9s', 'OPPO A57', 'OPPO A59s', 'OPPO R9m', 'OPPO A37m', 'vivo X9', 'OPPO A33', 'OPPO R11', 'OPPO A59m', 'vivo X7'],
          inverse: true, // 排序
排序

11.x轴、y轴

xAxis: [{ // x轴
yAxis: [{ // y轴

12.周围空白部分

https://www.hangge.com/blog/cache/detail_2161.html
坐标溢出

  grid: {
          top: 1,
          left: 20,
          right: 0,
          bottom: 1,
          containLabel: true // 是否包含坐标
        },

13.柱图宽度

https://blog.csdn.net/qq_38712932/article/details/88406603

14.轴线文字

https://blog.csdn.net/weixin_39090097/article/details/84230699
文字超出隐藏
https://www.imooc.com/article/68144
文字超出换行
https://blog.csdn.net/qq_34817440/article/details/101448194
倾斜
https://blog.csdn.net/xiongdaandxiaomi/article/details/84989059
坐标轴线颜色
https://blog.csdn.net/intelrain/article/details/82599647

axisLabel: { // label文字

15.legend

https://blog.csdn.net/qq_31201781/article/details/89843628

16.去掉刻度线

https://blog.csdn.net/soindy/article/details/72401375

17.堆叠柱形图

https://blog.csdn.net/yang__k/article/details/88414782

// stack:"1",    // 如果stack一样就会堆叠

相关文章

网友评论

      本文标题:2.echarts配置

      本文链接:https://www.haomeiwen.com/subject/btutqktx.html