echarts的常用案例

最新推荐文章于 2024-06-20 09:30:03 发布

wyk760629476

最新推荐文章于 2024-06-20 09:30:03 发布

阅读量1.1k

点赞数 1

分类专栏： js代码文章标签： echarts

本文链接：https://blog.csdn.net/wyk760629476/article/details/118483075

版权

js代码专栏收录该内容

19 篇文章 0 订阅

订阅专栏

安装依赖后引入echarts

// mian.js
import echarts from 'echarts'//引入
Vue.prototype.$echarts = echarts// 挂在vue上面

直接引入js

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

在文件中创建图表指定宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表</title>
</head>
<body>
<div id="chart1" style="width:600px; height: 800px;"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<!--直接引入js -->
<script type="text/javascript">
    //指定图标的配置和数据，具体内容在后面配置中
    var option = {}

    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart1'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
</script>

</body>
</html>

雷达图

option: {
  title: {
    text: '关键财务指标',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  // 图表的位置
  grid: {
    position: 'center'
  },
  radar: {
    // shape: 'circle', // 设置雷达图底线为圆形
    splitNumber: 3, // 雷达图圈数设置
    name: {
      textStyle: {
        color: 'rgb(51,148,201)'
      }
    },
    // 设置雷达图中间射线的颜色
    axisLine: {
      lineStyle: {
        color: 'rgb(51,148,201)'
      }
    },
    indicator: [
      { name: '实际报销率', max: 60 },
      { name: '资产负债率', max: 60 },
      { name: '固定资产折旧率', max: 60 },
      { name: '收支比率', max: 60 },
      { name: '销售利润率', max: 60 },
      { name: '应付付款率', max: 60 }
    ],
    // 雷达图背景的颜色, 在这儿随便设置了一个颜色, 完全不透明度为0, 就实现了透明背景
    splitArea: {
      show: false,
      areaStyle: {
        color: 'rgba(255,0,0,0)' // 图表背景的颜色
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: 'rgba(131,141,158,.1)' // 设置网格的颜色
      }
    }
  },
  series: [{
    name: '雷达图', // tooltip中的标题
    type: 'radar', // 表示是雷达图
    symbol: 'circle', // 拐点的样式, 还可以取值'rect','angle'等
    symbolSize: 1, // 拐点的大小
    areaStyle: {
      normal: {
        color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgb(86,191,200)'
        }, {
          offset: 1,
          color: 'rgb(51,148,201)'
        }])
        ],
        width: 1,
        opacity: 0.6
      }
    },
    data: [
      {
        value: [40, 51, 45, 48, 48, 54],
        // 设置区域边框和区域的颜色
        itemStyle: {
          normal: {
            color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(86,191,200)'
            }, {
              offset: 1,
              color: 'rgb(51,148,201)'
            }])
            ],
            lineStyle: {
              color: 'rgba(1,87,134,0.3)'
            }
          }
        },
        // 在拐点处显示数值
        label: {
          normal: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        }
      }
    ]
  }]
}

柱状图

option = {
  bottom: '50%',
  title: {
    text: '近13个月销售利润走势',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  grid: {
    left: '4%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
        color: '#838D9E'
      },
      formatter: function (value) {
        return value.split('').join('\n')
      }// 竖直显示x轴文字
    },
    data: ['新疆', '甘肃省', '贵州省', '江苏省', '浙江省', '福建省', '广东省', '湖北省', '山东省', '河北省', '北京市']
  },
  yAxis: [
    {
      type: 'value',
      name: '单位：亿元',
      nameTextStyle: {
        color: '#838D9E'
      },
      splitLine: { show: false }, // 不显示背景数据分割线
      axisLabel: {
        textStyle: {
          color: '#838D9E'
        }
      }
    }
  ],
  graphic: [
    { // 一个图形元素，类型是 group，可以嵌套子节点。
      type: 'group',
      children: [
        {
          type: 'text',
          style: {
            fill: '#1f79ac',
            text: '当月销售利润：',
            font: '1em "STHeiti", sans-serif',
            x: 100,
            y: 30
          }
        }, {
          type: 'text',
          style: {
            fill: '#fff',
            text: '1.05',
            font: '1.2em "STHeiti", sans-serif',
            x: 200,
            y: 30
          }
        }, {
          type: 'text',
          style: {
            fill: '#1f79ac',
            text: '亿元',
            font: '1em "STHeiti", sans-serif',
            x: 240,
            y: 30
          }
        }, {
          type: 'text',
          style: {
            fill: '#1f79ac',
            text: '同比变化：',
            font: '1em "STHeiti", sans-serif',
            x: 300,
            y: 30
          }
        }, {
          type: 'text',
          style: {
            fill: '#ce9126',
            text: '34.56%',
            font: '1.2em "STHeiti", sans-serif',
            x: 370,
            y: 30
          }
        }, {
          type: 'image',
          style: {
            image: require('./img/right1-2.png'),
            fill: 'red',
            width: 30,
            height: 30,
            x: 440,
            y: 22
          }
        }
      ]
    }
  ], // 图层
  series: [
    {
      type: 'bar',
      barWidth: 20, // 柱宽度
      data: [200, 150, 100, 250, 150, 100, 100, 200, 150, 200, 160],
      itemStyle: {
        normal: { // 柱状图颜色
          color: '#b051ad'
        }
      }
    }
  ]
}

横向柱状图

option = {
  title: {
    text: '产值GDP （单位： 亿元）',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  grid: {
    left: '4%',
    right: '4%',
    containLabel: true,
    bottom: '15%'
  },
  tooltip: {},
  xAxis: {
    axisLabel: {// 坐标轴刻度标签的相关设置
      textStyle: {
        color: '#d6e7d9'
      }
    },
    splitLine: {
      show: false // 是否显示坐标轴刻度背景线
    }

  },
  yAxis: {
    data: ['长期资产', '波动资产', '无形资产', '固定资产', '其他资产'],
    axisLabel: {// 坐标轴刻度标签的相关设置
      textStyle: {
        color: '#d6e7d9',
        align: 'right',
        width: 50,
        fontSize: 12
      }
    }
  },

  series: [{
    type: 'bar',
    barWidth: 15, // 柱宽度
    data: [100, 200, 100, 300, 100],
    itemStyle: {
      normal: { // 柱状图颜色
        color: '#0076e2'
      }
    }
  }]
}

折线图

option = {
  title: {
    text: '利润 （单位： 亿元）',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  tooltip: {},
  legend: {
    data: ['利润 （单位： 亿元）']
  },
  xAxis: {
    data: ['2016', '2017', '2018', '2019', '2020'],
    axisLabel: {// 坐标轴刻度标签的相关设置
      textStyle: {
        color: '#d6e7d9',
        width: '100%'
      }
    }
  },
  yAxis: {
    splitArea: { show: false },
    splitLine: { show: false },
    axisLabel: {// 坐标轴刻度标签的相关设置
      textStyle: {
        color: '#d6e7d9',
        align: 'right',
        fontSize: 12
      }
    }
  },
  series: [{
    type: 'line',
    barWidth: 10, // 柱宽度
    data: [100, 300, 350, 300, 400],
    smooth: true,
    areaStyle: {
      normal: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#269dc8' // 0% 处的颜色
          }, {
            offset: 0.7,
            color: '#0c1928' // 100% 处的颜色
          }]
        }
      }
    }, // 填充区域样式
    itemStyle: {
      normal: { // 柱状图颜色
        color: '#269dc8'
      }
    }
  }]
}

多条折线图

option = {
  title: {
    text: '航天总趋势分析',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  legend: {
    icon: 'roundRect',
    textStyle: {
      color: 'rgba(221,221,221,1)' // 示例颜色
    },
    top: 40,
    data: ['总资产', '营业额', '纳税额', '利润']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
    axisLabel: {
      textStyle: {
        color: '#838D9E'
      }
    },
    type: 'category',
    boundaryGap: false,
    splitLine: { show: false },
    data: [2016, 2017, 2018, 2019, 2020]
  }],
  yAxis: [{
    axisLabel: {
      textStyle: {
        color: '#838D9E'
      }
    },
    splitLine: { show: false }
    // type: 'value'
  }],
  series: [{
    name: '总资产',
    type: 'line',
    smooth: true, // 平滑的
    icon: 'line',
    itemStyle: {
      normal: {
        color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#1f838b'
        }, {
          offset: 1,
          color: 'rgb(51,148,201)'
        }])
        ],
        lineStyle: {
          color: '#1f838b'
        }
      }
    }, // 设置折现颜色
    stack: '总量',
    areaStyle: { normal: {} },
    data: [500, 420, 200, 134, 240, 330, 210]
  },
    {
      name: '营业额',
      type: 'line',
      smooth: true, // 平滑的
      itemStyle: {
        normal: {
          color: '#0b79b5',
          lineStyle: {
            color: '#0b79b5'
          }
        }
      }, // 设置折现颜色
      stack: '总量',
      areaStyle: { normal: {} },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '纳税额',
      type: 'line',
      smooth: true, // 平滑的
      itemStyle: {
        normal: {
          color: '#4556a4',
          lineStyle: {
            color: '#4556a4'
          }
        }
      }, // 设置折现颜色
      stack: '总量',
      areaStyle: { normal: {} },
      data: [150, 232, 101, 300, 190, 330, 410]
    },
    {
      name: '利润',
      type: 'line',
      smooth: true, // 平滑的
      itemStyle: {
        normal: {
          color: '#95cdef',
          lineStyle: {
            color: '#95cdef'
          }
        }
      }, // 设置折现颜色
      stack: '总量',
      areaStyle: { normal: {} },
      data: [320, 332, 301, 334, 230, 330, 320]
    }
  ]
}

柱状图和折线图在一个页面

option:
{
  title: {
    text: '航天存款趋势分析',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  grid: {
    left: '4%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
        color: '#838D9E'
      }
    },
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: [
    {
      type: 'value',
      name: '单位：亿元',
      nameTextStyle: {
        color: '#838D9E'
      },
      splitLine: { show: false }, // 不显示背景数据分割线
      axisLabel: {
        textStyle: {
          color: '#838D9E'
        }
      }
    },
    {
      splitLine: { show: false },
      nameTextStyle: { color: '#838D9E' },
      type: 'value',
      name: '单位：%',
      position: 'right',
      min: 0,
      max: 100, // 百分比的最大最小值
      axisLabel: {
        textStyle: {
          color: '#4572A7'
        },
        show: true,
        interval: 'auto',
        formatter: '{value}%'
      },
      show: true
    }
  ],
  series: [
    {
      type: 'line',
      // smooth: true,// 不是平滑的
      icon: 'line',
      itemStyle: {
        normal: {
          color: '#49a8e2',
          lineStyle: {
            color: '#49a8e2'
          }
        }
      }, // 设置折现颜色
      data: [50, 100, 90, 180, 140, 80, 80, 180, 130, 170, 140, 150]
    },
    {
      type: 'bar',
      barWidth: 25, // 柱宽度
      data: [200, 150, 100, 250, 150, 100, 100, 200, 150, 200, 160, 180],
      itemStyle: {
        normal: { // 柱状图颜色
          color: '#235790'
        }
      }
    }
  ]
}

环形图

option = {
  // 标题
  title: {
    text: '回款情况',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  grid: {
    left: '4%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
  graphic: [
      {
        type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
        top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom, 则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素, 父元素是 echarts 图表容器。如果是 group 的子元素, 父元素就是 group 元素。
        left: 'center', // 同上
        style: {
          fill: '#fff',
          width: 50,
          height: 60,
          text: ['47%', '实收账款占比']
        }
      },
    { // 一个图形元素，类型是 group，可以嵌套子节点。
      type: 'group',
      children: [
        {
          type: 'text',
          style: {
            fill: '#0c7ab5',
            text: '应收款率',
            font: '1em "STHeiti", sans-serif',
            x: 100,
            y: 50
          }
        }, {
          type: 'text',
          style: {
            fill: '#fff',
            text: '2.13',
            font: '1.4em "STHeiti", sans-serif',
            x: 100,
            y: 70
          }
        }, {
          type: 'text',
          style: {
            fill: '#fff',
            text: '亿元',
            font: '1em "STHeiti", sans-serif',
            x: 140,
            y: 70
          }
        }, {
          type: 'image',
          style: {
            image: require('./img/centerHeader1-1.png'),
            width: 30,
            height: 30,
            x: 50,
            y: 50
          }
        }
      ]
    }
  ], // 图层
  // 系列列表
  series: [{
    type: 'pie', // 系列类型
    radius: ['30%', '45%'], // 饼图的半径, 数组的第一项是内半径, 第二项是外半径。[ default: [0, '75%'] ]
    hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
    color: ['#4456a2', '#3B96CB', '#26609f', '#0b79b4'], // 圆环图的颜色
    label: { // 饼图图形上的文本标签, 可用于说明图形的一些数据信息, 比如值, 名称等.
      normal: {
        show: true, // 是否显示标签[ default: false ]
        formatter: (par) => {
          return par.name + '\n' + par.value + '%'
        } // 标签内容
      }
    },
    labelLine: { // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
      normal: {
        length: 0 // 在 label 位置 第一段折现的长度
      }
    },
    data: [{
      name: '分支机构1',
      value: 193
    }, {
      name: '分支机构2',
      value: 178
    }, {
      name: '控股企业2',
      value: 140
    }, {
      name: '控股企业1',
      value: 127
    }] // 系列中的数据内容数组。
  }]
}

中国地图

import 'echarts/map/js/china'
randomData: function () {
  return Math.round(Math.random() * 1000)
}

option = {
  geo: {
    map: 'china',
    roam: false, // 一定要关闭拖拽
    zoom: 1.23,
    center: [105, 36], // 调整地图位置
    label: {
      normal: {
        show: false, // 关闭省份名展示
        fontSize: '10',
        color: 'rgba(0,0,0,0.7)'
      },
      emphasis: {
        show: false
      }
    },
    itemStyle: {
      normal: {
        areaColor: '#002f67', // 地图颜色
        borderColor: '#389dff', // 边框颜色
        borderWidth: 1, // 设置外层边框
        shadowBlur: 5,
        shadowOffsetY: 8,
        shadowOffsetX: 0,
        shadowColor: '#0172fe'// 阴影颜色
      },
      emphasis: {
        areaColor: '#184cff',
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowBlur: 5,
        borderWidth: 0,
        shadowColor: 'rgba(83,230,59,0.5)'
      }
    }
  },
  series: [
    {
      type: 'map',
      map: 'china',
      roam: false,
      zoom: 1.23,
      center: [105, 36],
      // geoIndex: 1,
      // aspectScale: 0.75, //长宽比
      showLegendSymbol: false, // 存在legend时显示
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: false,
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {
        normal: {
          areaColor: '#002f67',
          borderColor: '#389dff',
          borderWidth: 0.5
        },
        emphasis: {
          areaColor: '#013068',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 5,
          borderWidth: 0,
          shadowColor: 'rgba(86,191,200,0.5)'
        }
      },
      data: [
        { name: '上海', value: this.randomData() },
        { name: '北京', value: '100' },
        { name: '天津', value: this.randomData() },
        { name: '重庆', value: this.randomData() },
        { name: '河北', value: this.randomData() },
        { name: '河南', value: this.randomData() },
        { name: '云南', value: this.randomData() },
        { name: '辽宁', value: this.randomData() },
        { name: '黑龙江', value: this.randomData() },
        { name: '湖南', value: this.randomData() },
        { name: '安徽', value: this.randomData() },
        { name: '山东', value: this.randomData() },
        { name: '新疆', value: this.randomData() },
        { name: '江苏', value: this.randomData() },
        { name: '浙江', value: this.randomData() },
        { name: '江西', value: this.randomData() },
        { name: '湖北', value: this.randomData() },
        { name: '广西', value: this.randomData() },
        { name: '甘肃', value: this.randomData() },
        { name: '山西', value: this.randomData() },
        { name: '内蒙古', value: this.randomData() },
        { name: '陕西', value: this.randomData() },
        { name: '吉林', value: this.randomData() },
        { name: '福建', value: this.randomData() },
        { name: '贵州', value: this.randomData() },
        { name: '广东', value: this.randomData() },
        { name: '青海', value: this.randomData() },
        { name: '西藏', value: this.randomData() },
        { name: '四川', value: this.randomData() },
        { name: '宁夏', value: this.randomData() },
        { name: '海南', value: this.randomData() },
        { name: '台湾', value: this.randomData() },
        { name: '香港', value: this.randomData() },
        { name: '澳门', value: this.randomData() }
      ]
    }
  ]
}

极地坐标

option = {
  title: {
    text: '市场地位',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  angleAxis: {
    show: true,
    splitLine: {
      show: true
    }
  },
  color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: 'rgb(86,191,200)'
  }, {
    offset: 1,
    color: 'rgb(51,148,201)'
  }])
  ],
  radiusAxis: {
    axisLine: { show: true },
    axisTick: { show: true },
    type: 'category',
    data: ['交通', '电力', '煤炭', '建筑'],
    z: 10
  }, // 极地坐标
  polar: {},
  series: [{
    type: 'bar',
    data: [1, 2, 3, 4],
    coordinateSystem: 'polar',
    name: 'A',
    stack: 'a',
    emphasis: {
      focus: 'series'
    }
  }]
}

常用配置：

图层

graphic:[
  { // 一个图形元素，类型是 group，可以嵌套子节点。
    type: 'group', // group图层组， image图片， text文本，rect矩形，circle圆形，ring环，sector扇形，arc圆弧，polygon几何，polyline折线，line线，bezierCurve二次或三次贝塞尔曲线。
    children: [
      {
        type: 'text',
        style: {
          fill: '#1f79ac', // 填充颜色
          text: '262', // 显示文字
          font: '3em "STHeiti", sans-serif', // 字体字号
          x: 50, // x轴位置
          y: 50// y轴位置
        }
      }, {
        type: 'text',
        style: {
          fill: '#1f79ac',
          text: '亿元',
          font: '1.2em "STHeiti", sans-serif',
          x: 130,
          y: 65
        }
      }, {
        type: 'image',
        style: {
          image: require('./img/left1-1.png'),
          width: 100,
          height: 150,
          x: 50,
          y: 100
        }
      }
    ]
  }
], // 图层

渐变色

option:{ series: [{
  type: 'line',
  barWidth: 10, // 柱宽度
  data: [100, 300, 350, 300, 400],
  smooth: true, //平滑的折线
  areaStyle: {
    normal: {
      color: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: '#269dc8' // 0% 处的颜色
        }, {
          offset: 0.7,
          color: '#0c1928' // 100% 处的颜色
        }]
      }
    }
  }, // 填充区域样式
  itemStyle: {
    normal: { // 柱状图颜色
      color: '#269dc8'
    }
  }
}

wyk760629476

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
echarts的常用案例

安装依赖后引入echarts// mian.jsimport echarts from 'echarts'//引入Vue.prototype.$echarts = echarts// 挂在vue上面直接引入js<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>在文件中创建图表指定宽高.
复制链接

扫一扫