echarts实现3D柱状图(视觉层面)

于 2024-07-02 10:45:19 发布
阅读量546 收藏 6
点赞数 4
文章标签： echarts 3d 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44624290/article/details/140120582
版权

一、第一种效果

效果图

使用步骤 

完整实例，copy就可直接使用

 

  1.  
    <template>
     
  2.  
    <div :class="className" :style="{height:height,width:width}" />
     
  3.  
    </template>
     
  5.  
    <script>
     
  6.  
    import echarts from 'echarts'
     
  7.  
    require('echarts/theme/macarons') // echarts theme
     
  8.  
    import resize from '@/views/dashboard/mixins/resize'
     
  10.  
    export default {
     
  11.  
    mixins: [resize],
     
  12.  
    props: {
     
  13.  
    className: {
     
  14.  
    type: String,
     
  15.  
    default: 'chart'
     
  16.  
    },
     
  17.  
    width: {
     
  18.  
    type: String,
     
  19.  
    default: '100%'
     
  20.  
    },
     
  21.  
    height: {
     
  22.  
    type: String,
     
  23.  
    default: '400px'
     
  24.  
    },
     
  25.  
    dataList: {
     
  26.  
    type: Array,
     
  27.  
    default: []
     
  28.  
    }
     
  29.  
    },
     
  30.  
    data() {
     
  31.  
    return {
     
  32.  
    chart: null,
     
  33.  
    xAxisData: ['数学', '语文', '英语', '物理', '化学'],
     
  34.  
    data1: [200, 100, 200, 50, 100],
     
  35.  
    data2: [300, 200, 300, 200, 300]
     
  36.  
    }
     
  37.  
    },
     
  38.  
    mounted() {
     
  39.  
    this.$nextTick(() => {
     
  40.  
    this.initChart()
     
  41.  
    })
     
  42.  
    },
     
  43.  
    beforeDestroy() {
     
  44.  
    if (!this.chart) {
     
  45.  
    return
     
  46.  
    }
     
  47.  
    this.chart.dispose()
     
  48.  
    this.chart = null
     
  49.  
    },
     
  50.  
    watch: {
     
  51.  
    dataList(val, oldVal) {//普通的watch监听
     
  52.  
    this.initChart()
     
  53.  
    }
     
  54.  
    },
     
  55.  
    methods: {
     
  56.  
    initChart() {
     
  58.  
    this.chart = echarts.init(this.$el, 'macarons')
     
  59.  
    this.chart.setOption(
     
  60.  
    {
     
  61.  
    tooltip: {
     
  62.  
    trigger: 'item'
     
  63.  
    },
     
  64.  
    grid: {
     
  65.  
    top: '10%',
     
  66.  
    bottom: '20%',
     
  67.  
    right: '2%',
     
  68.  
    left: '10%'
     
  69.  
    },
     
  70.  
    legend: {
     
  71.  
    data: ['2021', '2022'],
     
  72.  
    left: '20px',
     
  73.  
    textStyle: {
     
  74.  
    color: '#FFFFFF'
     
  75.  
    }
     
  76.  
    },
     
  77.  
    graphic: [
     
  78.  
    {
     
  79.  
    type: 'image', // 图形元素类型
     
  80.  
    id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
     
  81.  
    right: 'center', // 根据父元素进行定位 （居中）
     
  82.  
    bottom: '0%', // 根据父元素进行定位 （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
     
  83.  
    z: 0, // 层叠
     
  84.  
    bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
     
  85.  
    style: {
     
  86.  
    image:
     
  87.  
    'https://img0.baidu.com/it/u=3846011338,1538056540&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500', // 这里一定要注意、注意，必须是https开头的图片路径地址
     
  88.  
    width: 800,
     
  89.  
    height: 400
     
  90.  
    }
     
  91.  
    }
     
  92.  
    ],
     
  93.  
    xAxis: {
     
  94.  
    data: this.xAxisData,
     
  95.  
    axisTick: {
     
  96.  
    show: false
     
  97.  
    },
     
  98.  
    axisLine: {
     
  99.  
    show: false
     
  100.  
    },
     
  101.  
    axisLabel: {
     
  102.  
    interval: 0,
     
  103.  
    textStyle: {
     
  104.  
    color: '#fff',
     
  105.  
    fontSize: 20
     
  106.  
    },
     
  107.  
    margin: 40
     
  108.  
    }
     
  109.  
    },
     
  110.  
    yAxis: {
     
  111.  
    splitLine: {
     
  112.  
    show: false
     
  113.  
    },
     
  114.  
    axisTick: {
     
  115.  
    show: true,
     
  116.  
    alignWithLabel: true,
     
  117.  
    inside: true
     
  118.  
    },
     
  119.  
    axisLine: {
     
  120.  
    show: true
     
  121.  
    },
     
  122.  
    axisLabel: {
     
  123.  
    textStyle: {
     
  124.  
    color: '#fff',
     
  125.  
    fontSize: 20
     
  126.  
    }
     
  127.  
    }
     
  128.  
    },
     
  129.  
    series: [
     
  130.  
    // 底部的光晕
     
  131.  
    {
     
  132.  
    name: '',
     
  133.  
    type: 'pictorialBar',
     
  134.  
    tooltip: {
     
  135.  
    show: false
     
  136.  
    },
     
  137.  
    symbolSize: [90, 40],
     
  138.  
    symbolOffset: [0, 20],
     
  139.  
    z: 1,
     
  140.  
    itemStyle: {
     
  141.  
    normal: {
     
  142.  
    color: 'transparent',
     
  143.  
    borderColor: '#26B2E8',
     
  144.  
    borderType: 'solid',
     
  145.  
    borderWidth: 1
     
  146.  
    }
     
  147.  
    },
     
  148.  
    data: [1, 1, 1, 1, 1]
     
  149.  
    },
     
  151.  
    {
     
  152.  
    name: '2021',
     
  153.  
    type: 'bar',
     
  154.  
    barWidth: 45,
     
  155.  
    barGap: '-100%',
     
  156.  
    z: 0,
     
  157.  
    itemStyle: {
     
  158.  
    color: '#E8CCFF',
     
  159.  
    opacity: 0.7
     
  160.  
    },
     
  161.  
    data: this.data2
     
  162.  
    },
     
  163.  
    {
     
  164.  
    name: '2022',
     
  165.  
    type: 'bar',
     
  166.  
    barWidth: 45,
     
  167.  
    barGap: '-100%',
     
  168.  
    itemStyle: {
     
  169.  
    color: '#FF9A22'
     
  170.  
    },
     
  171.  
    data: this.data1
     
  172.  
    },
     
  173.  
    //头部、中部、尾部圆片
     
  174.  
    {
     
  175.  
    name: '2021', // 头部
     
  176.  
    type: 'pictorialBar',
     
  177.  
    symbolSize: [45, 25],
     
  178.  
    symbolOffset: [0, -10],
     
  179.  
    z: 12,
     
  180.  
    symbolPosition: 'end',
     
  181.  
    itemStyle: {
     
  182.  
    color: '#D28EFF',
     
  183.  
    opacity: 1
     
  184.  
    },
     
  185.  
    data: this.data2
     
  186.  
    },
     
  187.  
    {
     
  188.  
    name: '2022',//中部
     
  189.  
    type: 'pictorialBar',
     
  190.  
    symbolSize: [45, 25],
     
  191.  
    symbolOffset: [0, -10],
     
  192.  
    z: 12,
     
  193.  
    symbolPosition: 'end',
     
  194.  
    itemStyle: {
     
  195.  
    opacity: 1,
     
  196.  
    color: '#FF3EFF'
     
  197.  
    },
     
  198.  
    data: this.data1
     
  199.  
    },
     
  200.  
    {
     
  201.  
    //三个最低下的圆片
     
  202.  
    name: '',
     
  203.  
    type: 'pictorialBar',
     
  204.  
    symbolSize: [45, 25],
     
  205.  
    symbolOffset: [0, 10],
     
  206.  
    z: 12,
     
  207.  
    itemStyle: {
     
  208.  
    opacity: 1,
     
  209.  
    color: 'red'
     
  210.  
    },
     
  211.  
    data: this.data1
     
  212.  
    }
     
  213.  
    ]
     
  214.  
    }
     
  215.  
    )
     
  216.  
    }
     
  217.  
    }
     
  218.  
    }
     
  219.  
    </script>
     
 

 

  1.  
    itemStyle: {
     
  2.  
    normal: {
     
  3.  
    //这里是颜色
     
  4.  
    color: function (params) {
     
  5.  
    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
     
  6.  
    var colorList = ['#00A3E0', '#FFA100', '#ffc0ca', '#CCCCCC', '#749f83', '#04A035', '#8729D9', '#c207c9', '#c90762', '#c90707'];
     
  7.  
    return colorList[params.dataIndex]
     
  8.  
    }
     
  9.  
    }
     
  10.  
    }
     
 

 

附带网图背景
 

 

二、第二种效果
 

效果图
 

 

使用步骤 
 

完整实例，copy就可直接使用
 

 

  1.  
    <template>
     
  2.  
    <div :class="className" :style="{height:height,width:width}" />
     
  3.  
    </template>
     
  5.  
    <script>
     
  6.  
    import echarts from 'echarts'
     
  7.  
    require('echarts/theme/macarons') // echarts theme
     
  8.  
    import resize from '@/views/dashboard/mixins/resize'
     
  10.  
    export default {
     
  11.  
    mixins: [resize],
     
  12.  
    props: {
     
  13.  
    className: {
     
  14.  
    type: String,
     
  15.  
    default: 'chart'
     
  16.  
    },
     
  17.  
    width: {
     
  18.  
    type: String,
     
  19.  
    default: '100%'
     
  20.  
    },
     
  21.  
    height: {
     
  22.  
    type: String,
     
  23.  
    default: '400px'
     
  24.  
    },
     
  25.  
    dataList: {
     
  26.  
    type: Array,
     
  27.  
    default: []
     
  28.  
    }
     
  29.  
    },
     
  30.  
    data() {
     
  31.  
    return {
     
  32.  
    chart: null,
     
  33.  
    xAxisData: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6', '区域7', '区域8', '区域9'],
     
  34.  
    colorArr: ['#0C628C', '#3887D5', '#2570BB'],
     
  35.  
    barWidth: 30,
     
  36.  
    data1: [6, 7, 3, 11, 33, 38, 22, 55, 66],
     
  37.  
    bottomData: [1, 1, 1, 1, 1, 1, 1, 1, 1],
     
  38.  
    topData: [100, 100, 100, 100, 100, 100, 100, 100, 100],
     
  39.  
    names: ["区域"]
     
  40.  
    }
     
  41.  
    },
     
  42.  
    mounted() {
     
  43.  
    this.$nextTick(() => {
     
  44.  
    this.initChart()
     
  45.  
    })
     
  46.  
    },
     
  47.  
    beforeDestroy() {
     
  48.  
    if (!this.chart) {
     
  49.  
    return
     
  50.  
    }
     
  51.  
    this.chart.dispose()
     
  52.  
    this.chart = null
     
  53.  
    },
     
  54.  
    watch: {
     
  55.  
    dataList(val, oldVal) {//普通的watch监听
     
  56.  
    this.initChart()
     
  57.  
    }
     
  58.  
    },
     
  59.  
    methods: {
     
  60.  
    initChart() {
     
  61.  
    var color = {
     
  62.  
    type: 'linear',
     
  63.  
    x: 0,
     
  64.  
    x2: 1,
     
  65.  
    y: 0,
     
  66.  
    y2: 0,
     
  67.  
    colorStops: [
     
  68.  
    {
     
  69.  
    offset: 0,
     
  70.  
    color: this.colorArr[0]
     
  71.  
    },
     
  72.  
    {
     
  73.  
    offset: 0.5,
     
  74.  
    color: this.colorArr[0]
     
  75.  
    },
     
  76.  
    {
     
  77.  
    offset: 0.5,
     
  78.  
    color: this.colorArr[1]
     
  79.  
    },
     
  80.  
    {
     
  81.  
    offset: 1,
     
  82.  
    color: this.colorArr[1]
     
  83.  
    }
     
  84.  
    ]
     
  85.  
    }
     
  86.  
    this.chart = echarts.init(this.$el, 'macarons')
     
  87.  
    this.chart.setOption(
     
  88.  
    {
     
  89.  
    tooltip: {
     
  90.  
    trigger: 'axis',
     
  91.  
    formatter: function (params) {
     
  92.  
    var str = params[0].name + ':'
     
  93.  
    params.filter(function (item) {
     
  94.  
    if (item.componentSubType == 'bar' && item.seriesName === '数据') {
     
  95.  
    str += item.value
     
  96.  
    }
     
  97.  
    })
     
  98.  
    return str
     
  99.  
    }
     
  100.  
    },
     
  101.  
    grid: {
     
  102.  
    left: '0%',
     
  103.  
    right: '10%',
     
  104.  
    bottom: '3%',
     
  105.  
    containLabel: true
     
  106.  
    },
     
  107.  
    xAxis: [
     
  108.  
    {
     
  109.  
    type: 'category',
     
  110.  
    name: this.names[0],
     
  111.  
    data: this.xAxisData,
     
  112.  
    // 更改坐标轴颜色
     
  113.  
    axisLine: {
     
  114.  
    lineStyle: {
     
  115.  
    color: "#FFFFFF"
     
  116.  
    },
     
  117.  
    onZero: false
     
  118.  
    },
     
  119.  
    // x轴的字体样式
     
  120.  
    axisLabel: {
     
  121.  
    interval: 0,
     
  122.  
    textStyle: {
     
  123.  
    color: "#FFFFFF", // 更改坐标轴文字颜色
     
  124.  
    fontSize: 14, // 更改坐标轴文字大小
     
  125.  
    fontFamily: 'MicrosoftYaHei'
     
  126.  
    },
     
  127.  
    }
     
  129.  
    }
     
  130.  
    ],
     
  131.  
    yAxis: [
     
  132.  
    {
     
  133.  
    type: 'value',
     
  134.  
    name: '得分',
     
  135.  
    axisLabel: {
     
  136.  
    formatter: '{value}',
     
  137.  
    textStyle: {
     
  138.  
    color: this.fontColorY, // 更改坐标轴文字颜色
     
  139.  
    fontSize: 12, // 更改坐标轴文字大小
     
  140.  
    fontFamily: 'MicrosoftYaHei'
     
  141.  
    }
     
  142.  
    },
     
  143.  
    // 更改坐标轴颜色
     
  144.  
    axisLine: {
     
  145.  
    lineStyle: {
     
  146.  
    color: "#FFFFFF"
     
  147.  
    }
     
  148.  
    },
     
  149.  
    // 网格线
     
  150.  
    splitLine: {
     
  151.  
    // 网格线
     
  152.  
    lineStyle: {
     
  153.  
    type: 'solid',
     
  154.  
    with: 0.5,
     
  155.  
    color: this.borderColor
     
  156.  
    }
     
  157.  
    }
     
  158.  
    }
     
  159.  
    ],
     
  160.  
    series: [
     
  161.  
    // 数据低下的圆片
     
  162.  
    {
     
  163.  
    name: '',
     
  164.  
    type: 'pictorialBar',
     
  165.  
    symbolOffset: ['0%', '50%'],
     
  166.  
    symbolSize: [this.barWidth - 4, (10 * (this.barWidth - 4)) / this.barWidth],
     
  167.  
    z: 12,
     
  168.  
    symbol: 'diamond',
     
  169.  
    itemStyle: {
     
  170.  
    opacity: 1,
     
  171.  
    color: color
     
  172.  
    // color: 'transparent'
     
  173.  
    },
     
  174.  
    data: this.bottomData
     
  175.  
    },
     
  176.  
    // 数据的柱状图
     
  177.  
    {
     
  178.  
    name: '数据',
     
  179.  
    type: 'bar',
     
  180.  
    barWidth: this.barWidth,
     
  181.  
    itemStyle: {
     
  182.  
    // lenged文本
     
  183.  
    opacity: 1, // 这个是 透明度
     
  184.  
    color: color
     
  185.  
    },
     
  187.  
    data: this.data1
     
  188.  
    },
     
  189.  
    // 替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20
     
  190.  
    {
     
  191.  
    type: 'bar',
     
  192.  
    symbol: 'diamond',
     
  193.  
    barWidth: this.barWidth + 2,
     
  194.  
    itemStyle: {
     
  195.  
    color: 'transparent'
     
  196.  
    },
     
  197.  
    data: this.data1
     
  198.  
    },
     
  199.  
    // 数据顶部的样式
     
  200.  
    {
     
  201.  
    name: '',
     
  202.  
    type: 'pictorialBar',
     
  203.  
    symbol: 'diamond',
     
  204.  
    symbolOffset: ['0%', '-50%'],
     
  205.  
    symbolSize: [this.barWidth, 10],
     
  206.  
    z: 12,
     
  207.  
    itemStyle: {
     
  208.  
    normal: {
     
  209.  
    opacity: 1,
     
  210.  
    color: this.colorArr[2],
     
  211.  
    label: {
     
  212.  
    show: true, // 开启显示
     
  213.  
    position: 'top', // 在上方显示
     
  214.  
    textStyle: {
     
  215.  
    // 数值样式
     
  216.  
    color: '#FFFFFF',
     
  217.  
    fontSize: 12,
     
  218.  
    top: 50
     
  219.  
    }
     
  220.  
    }
     
  221.  
    }
     
  222.  
    },
     
  223.  
    symbolPosition: 'end',
     
  224.  
    data: this.data1
     
  225.  
    },
     
  227.  
    // 阴影的顶部
     
  228.  
    {
     
  229.  
    name: '', // 头部
     
  230.  
    type: 'pictorialBar',
     
  231.  
    symbol: 'diamond',
     
  232.  
    symbolOffset: ['0%', '-50%'],
     
  233.  
    symbolSize: [this.barWidth, 10],
     
  234.  
    z: 12,
     
  235.  
    symbolPosition: 'end',
     
  236.  
    itemStyle: {
     
  237.  
    color: 'blue',
     
  238.  
    opacity: 0.3,
     
  239.  
    borderWidth: 1,
     
  240.  
    borderColor: 'rgba(18, 47, 133,1)'
     
  241.  
    },
     
  242.  
    data: this.topData
     
  243.  
    },
     
  244.  
    // 后面的背景
     
  245.  
    {
     
  246.  
    name: '',
     
  247.  
    type: 'bar',
     
  248.  
    barWidth: this.barWidth,
     
  249.  
    barGap: '-100%',
     
  250.  
    z: 0,
     
  251.  
    itemStyle: {
     
  252.  
    color: 'rgba(18, 47, 133,0.3)'
     
  253.  
    },
     
  255.  
    data: this.topData
     
  256.  
    }
     
  257.  
    ]
     
  258.  
    }
     
  259.  
    )
     
  260.  
    }
     
  261.  
    }
     
  262.  
    }
     
  263.  
    </script>
     
 

三、第三种效果
 

效果图
 

 

使用步骤
 

完整实例，copy就可直接使用 
 

 

  1.  
    <template>
     
  2.  
    <div :class="className" :style="{height:height,width:width}" />
     
  3.  
    </template>
     
  5.  
    <script>
     
  6.  
    import echarts from 'echarts'
     
  7.  
    require('echarts/theme/macarons') // echarts theme
     
  8.  
    import resize from '@/views/dashboard/mixins/resize'
     
  10.  
    export default {
     
  11.  
    mixins: [resize],
     
  12.  
    props: {
     
  13.  
    className: {
     
  14.  
    type: String,
     
  15.  
    default: 'chart'
     
  16.  
    },
     
  17.  
    width: {
     
  18.  
    type: String,
     
  19.  
    default: '100%'
     
  20.  
    },
     
  21.  
    height: {
     
  22.  
    type: String,
     
  23.  
    default: '400px'
     
  24.  
    },
     
  25.  
    dataList: {
     
  26.  
    type: Array,
     
  27.  
    default: []
     
  28.  
    }
     
  29.  
    },
     
  30.  
    data() {
     
  31.  
    return {
     
  32.  
    chart: null,
     
  33.  
    MAX: [800, 800, 800, 800, 800, 800, 800],
     
  34.  
    NAME: [2015, 2016, 2017, 2018, 2019, 2020, 2021],
     
  35.  
    VALUE: [200, 400, 300, 500, 700, 300, 100],
     
  36.  
    VALUE2: [500, 200, 700, 400, 300, 600, 400],
     
  37.  
    }
     
  38.  
    },
     
  39.  
    mounted() {
     
  40.  
    this.$nextTick(() => {
     
  41.  
    this.initChart()
     
  42.  
    })
     
  43.  
    },
     
  44.  
    beforeDestroy() {
     
  45.  
    if (!this.chart) {
     
  46.  
    return
     
  47.  
    }
     
  48.  
    this.chart.dispose()
     
  49.  
    this.chart = null
     
  50.  
    },
     
  51.  
    watch: {
     
  52.  
    dataList(val, oldVal) {//普通的watch监听
     
  53.  
    this.initChart()
     
  54.  
    }
     
  55.  
    },
     
  56.  
    methods: {
     
  57.  
    initChart() {
     
  58.  
    const offsetX = 16;
     
  59.  
    const offsetY = 8;
     
  60.  
    [-18, 18].forEach((customOffset, index) => {
     
  61.  
    const CubeLeft = echarts.graphic.extendShape({
     
  62.  
    shape: {
     
  63.  
    x: 0,
     
  64.  
    y: 0,
     
  65.  
    },
     
  66.  
    buildPath: function (ctx, shape) {
     
  67.  
    const xAxisPoint = shape.xAxisPoint;
     
  68.  
    const c0 = [shape.x - customOffset, shape.y];
     
  69.  
    const c1 = [shape.x - offsetX - customOffset, shape.y - offsetY];
     
  70.  
    const c2 = [xAxisPoint[0] - offsetX - customOffset, xAxisPoint[1] - offsetY];
     
  71.  
    const c3 = [xAxisPoint[0] - customOffset, xAxisPoint[1]];
     
  72.  
    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
     
  73.  
    },
     
  74.  
    });
     
  75.  
    const CubeRight = echarts.graphic.extendShape({
     
  76.  
    shape: {
     
  77.  
    x: 0,
     
  78.  
    y: 0,
     
  79.  
    },
     
  80.  
    buildPath: function (ctx, shape) {
     
  81.  
    const xAxisPoint = shape.xAxisPoint;
     
  82.  
    const c1 = [shape.x - customOffset, shape.y];
     
  83.  
    const c2 = [xAxisPoint[0] - customOffset, xAxisPoint[1]];
     
  84.  
    const c3 = [xAxisPoint[0] + offsetX - customOffset, xAxisPoint[1] - offsetY];
     
  85.  
    const c4 = [shape.x + offsetX - customOffset, shape.y - offsetY];
     
  86.  
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
     
  87.  
    },
     
  88.  
    });
     
  89.  
    const CubeTop = echarts.graphic.extendShape({
     
  90.  
    shape: {
     
  91.  
    x: 0,
     
  92.  
    y: 0,
     
  93.  
    },
     
  94.  
    buildPath: function (ctx, shape) {
     
  95.  
    const c1 = [shape.x - customOffset, shape.y];
     
  96.  
    const c2 = [shape.x + offsetX - customOffset, shape.y - offsetY];
     
  97.  
    const c3 = [shape.x - customOffset, shape.y - offsetX];
     
  98.  
    const c4 = [shape.x - offsetX - customOffset, shape.y - offsetY];
     
  99.  
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
     
  100.  
    },
     
  101.  
    });
     
  102.  
    echarts.graphic.registerShape('CubeLeft' + index, CubeLeft);
     
  103.  
    echarts.graphic.registerShape('CubeRight' + index, CubeRight);
     
  104.  
    echarts.graphic.registerShape('CubeTop' + index, CubeTop);
     
  105.  
    });
     
  106.  
    this.chart = echarts.init(this.$el, 'macarons')
     
  107.  
    this.chart.setOption(
     
  108.  
    {
     
  109.  
    backgroundColor: '#012366',
     
  110.  
    grid: {
     
  111.  
    left: '1%',
     
  112.  
    right: '8%',
     
  113.  
    bottom: '5%',
     
  114.  
    top: '8%',
     
  115.  
    containLabel: true,
     
  116.  
    },
     
  117.  
    tooltip: {
     
  118.  
    trigger: 'axis',
     
  119.  
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
     
  120.  
    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
     
  121.  
    },
     
  122.  
    formatter: function (e) {
     
  123.  
    var str =
     
  124.  
    e[2].axisValue +
     
  125.  
    "<br>" +
     
  126.  
    "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
     
  127.  
    "rgba(225,155,172, 1)" +
     
  128.  
    ";'></span>" +
     
  129.  
    "课程数量 : " +
     
  130.  
    e[2].value +
     
  131.  
    "<br>" +
     
  132.  
    "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
     
  133.  
    "rgba(25,155,172, 1)" +
     
  134.  
    ";'></span>" +
     
  135.  
    "完成数量 : " +
     
  136.  
    e[3].value;
     
  137.  
    return str;
     
  138.  
    },
     
  139.  
    },
     
  140.  
    legend: {
     
  141.  
    orient: 'vertical',
     
  142.  
    x: 'right',
     
  143.  
    y: 'center',
     
  144.  
    data: ['课程数量', '完成数量',]
     
  145.  
    },
     
  146.  
    xAxis: {
     
  147.  
    type: 'category',
     
  148.  
    data: this.NAME,
     
  149.  
    name:"年份",
     
  150.  
    axisLine: {
     
  151.  
    show: true,
     
  152.  
    lineStyle: {
     
  153.  
    width: 2,
     
  154.  
    color: '#7ca7d9',
     
  155.  
    },
     
  156.  
    },
     
  157.  
    axisTick: {
     
  158.  
    show: false,
     
  159.  
    },
     
  160.  
    axisLabel: {
     
  161.  
    fontSize: 14,
     
  162.  
    },
     
  163.  
    },
     
  164.  
    yAxis: {
     
  165.  
    type: 'value',
     
  166.  
    name:"数量",
     
  167.  
    minInterval: 1,
     
  168.  
    axisLine: {
     
  169.  
    show: true,
     
  170.  
    lineStyle: {
     
  171.  
    width: 2,
     
  172.  
    color: '#2B7BD6',
     
  173.  
    },
     
  174.  
    },
     
  175.  
    splitLine: {
     
  176.  
    show: true,
     
  177.  
    lineStyle: {
     
  178.  
    color: 'rgba(201,217,241,0.23)',
     
  179.  
    },
     
  180.  
    },
     
  181.  
    axisTick: {
     
  182.  
    show: false,
     
  183.  
    },
     
  184.  
    axisLabel: {
     
  185.  
    fontSize: 14,
     
  186.  
    },
     
  187.  
    },
     
  189.  
    dataZoom: [{
     
  190.  
    show: true,
     
  191.  
    height: 10,
     
  192.  
    xAxisIndex: [
     
  193.  
    0
     
  194.  
    ],
     
  195.  
    bottom: 0,
     
  196.  
    start: 10,
     
  197.  
    end: 50,
     
  198.  
    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
     
  199.  
    handleSize: '110%',
     
  200.  
    handleStyle: {
     
  201.  
    color: "#d3dee5",
     
  203.  
    },
     
  204.  
    textStyle: {
     
  205.  
    color: "#fff"
     
  206.  
    },
     
  207.  
    borderColor: "#90979c"
     
  210.  
    }, {
     
  211.  
    type: "inside",
     
  212.  
    show: true,
     
  213.  
    height: 15,
     
  214.  
    start: 1,
     
  215.  
    end: 10
     
  216.  
    }],
     
  217.  
    series: [
     
  218.  
    {
     
  219.  
    // 最大高度
     
  220.  
    type: 'custom',
     
  221.  
    renderItem: function (params, api) {
     
  222.  
    const location = api.coord([api.value(0), api.value(1)])
     
  223.  
    return {
     
  224.  
    type: 'group',
     
  225.  
    children: [{
     
  226.  
    type: 'CubeLeft0',
     
  227.  
    shape: {
     
  228.  
    api,
     
  229.  
    x: location[0],
     
  230.  
    y: location[1],
     
  231.  
    xAxisPoint: api.coord([api.value(0), 0])
     
  232.  
    },
     
  233.  
    style: {
     
  234.  
    fill: `rgba(25,155,172, .1)`
     
  235.  
    }
     
  236.  
    }, {
     
  237.  
    type: 'CubeRight0',
     
  238.  
    shape: {
     
  239.  
    api,
     
  240.  
    x: location[0],
     
  241.  
    y: location[1],
     
  242.  
    xAxisPoint: api.coord([api.value(0), 0])
     
  243.  
    },
     
  244.  
    style: {
     
  245.  
    fill: `rgba(25,155,172, .3)`
     
  246.  
    }
     
  247.  
    }, {
     
  248.  
    type: 'CubeTop0',
     
  249.  
    shape: {
     
  250.  
    api,
     
  251.  
    x: location[0],
     
  252.  
    y: location[1],
     
  253.  
    xAxisPoint: api.coord([api.value(0), 0])
     
  254.  
    },
     
  255.  
    style: {
     
  256.  
    fill: `rgba(25,155,172, .4)`
     
  257.  
    }
     
  258.  
    }]
     
  259.  
    }
     
  260.  
    },
     
  261.  
    data: this.MAX
     
  262.  
    },
     
  264.  
    {
     
  265.  
    // 最大高度
     
  266.  
    type: 'custom',
     
  267.  
    renderItem: function (params, api) {
     
  268.  
    const location = api.coord([api.value(0), api.value(1)])
     
  269.  
    return {
     
  270.  
    type: 'group',
     
  271.  
    children: [{
     
  272.  
    type: 'CubeLeft1',
     
  273.  
    shape: {
     
  274.  
    api,
     
  275.  
    x: location[0],
     
  276.  
    y: location[1],
     
  277.  
    xAxisPoint: api.coord([api.value(0), 0])
     
  278.  
    },
     
  279.  
    style: {
     
  280.  
    fill: `rgba(225,155,172, .1)`
     
  281.  
    }
     
  282.  
    }, {
     
  283.  
    type: 'CubeRight1',
     
  284.  
    shape: {
     
  285.  
    api,
     
  286.  
    x: location[0],
     
  287.  
    y: location[1],
     
  288.  
    xAxisPoint: api.coord([api.value(0), 0])
     
  289.  
    },
     
  290.  
    style: {
     
  291.  
    fill: `rgba(225,155,172, .3)`
     
  292.  
    }
     
  293.  
    }, {
     
  294.  
    type: 'CubeTop1',
     
  295.  
    shape: {
     
  296.  
    api,
     
  297.  
    x: location[0],
     
  298.  
    y: location[1],
     
  299.  
    xAxisPoint: api.coord([api.value(0), 0])
     
  300.  
    },
     
  301.  
    style: {
     
  302.  
    fill: `rgba(225,155,172, .4)`
     
  303.  
    }
     
  304.  
    }]
     
  305.  
    }
     
  306.  
    },
     
  307.  
    data: this.MAX
     
  308.  
    },
     
  309.  
    {
     
  310.  
    type: 'custom',
     
  311.  
    renderItem: (params, api) => {
     
  312.  
    const location = api.coord([api.value(0), api.value(1)]);
     
  313.  
    return {
     
  314.  
    type: 'group',
     
  315.  
    children: [
     
  316.  
    {
     
  317.  
    type: 'CubeLeft0',
     
  318.  
    shape: {
     
  319.  
    api,
     
  320.  
    xValue: api.value(0),
     
  321.  
    yValue: api.value(1),
     
  322.  
    x: location[0] - 0,
     
  323.  
    y: location[1],
     
  324.  
    xAxisPoint: api.coord([api.value(0), 0]),
     
  325.  
    },
     
  326.  
    style: {
     
  327.  
    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     
  328.  
    {
     
  329.  
    offset: 0,
     
  330.  
    color: 'rgba(25,155,172, .5)',
     
  331.  
    },
     
  332.  
    {
     
  333.  
    offset: 1,
     
  334.  
    color: 'rgba(25,155,172, .5)',
     
  335.  
    },
     
  336.  
    ]),
     
  337.  
    },
     
  338.  
    },
     
  339.  
    {
     
  340.  
    type: 'CubeRight0',
     
  341.  
    shape: {
     
  342.  
    api,
     
  343.  
    xValue: api.value(0),
     
  344.  
    yValue: api.value(1),
     
  345.  
    x: location[0] - 0,
     
  346.  
    y: location[1],
     
  347.  
    xAxisPoint: api.coord([api.value(0), 0]),
     
  348.  
    },
     
  349.  
    style: {
     
  350.  
    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     
  351.  
    {
     
  352.  
    offset: 0,
     
  353.  
    color: 'rgba(25,155,172, 1)',
     
  354.  
    },
     
  355.  
    {
     
  356.  
    offset: 1,
     
  357.  
    color: 'rgba(25,155,172, .5)',
     
  358.  
    },
     
  359.  
    ]),
     
  360.  
    },
     
  361.  
    },
     
  362.  
    {
     
  363.  
    type: 'CubeTop0',
     
  364.  
    shape: {
     
  365.  
    api,
     
  366.  
    xValue: api.value(0),
     
  367.  
    yValue: api.value(1),
     
  368.  
    x: location[0] - 0,
     
  369.  
    y: location[1],
     
  370.  
    xAxisPoint: api.coord([api.value(0), 0]),
     
  371.  
    },
     
  372.  
    style: {
     
  373.  
    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     
  374.  
    {
     
  375.  
    offset: 0,
     
  376.  
    color: 'rgba(25,155,172, .8)',
     
  377.  
    },
     
  378.  
    {
     
  379.  
    offset: 1,
     
  380.  
    color: 'rgba(25,155,172, .8)',
     
  381.  
    },
     
  382.  
    ]),
     
  383.  
    },
     
  384.  
    },
     
  385.  
    ],
     
  386.  
    };
     
  387.  
    },
     
  388.  
    data: this.VALUE,
     
  389.  
    },
     
  390.  
    {
     
  391.  
    type: 'custom',
     
  392.  
    renderItem: (params, api) => {
     
  393.  
    const location = api.coord([api.value(0), api.value(1)]);
     
  394.  
    return {
     
  395.  
    type: 'group',
     
  396.  
    children: [
     
  397.  
    {
     
  398.  
    type: 'CubeLeft1',
     
  399.  
    shape: {
     
  400.  
    api,
     
  401.  
    xValue: api.value(0),
     
  402.  
    yValue: api.value(1),
     
  403.  
    x: location[0] - 0,
     
  404.  
    y: location[1],
     
  405.  
    xAxisPoint: api.coord([api.value(0), 0]),
     
  406.  
    },
     
  407.  
    style: {
     
  408.  
    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     
  409.  
    {
     
  410.  
    offset: 0,
     
  411.  
    color: 'rgba(225,155,172, .5)',
     
  412.  
    },
     
  413.  
    {
     
  414.  
    offset: 1,
     
  415.  
    color: 'rgba(225,155,172, .5)',
     
  416.  
    },
     
  417.  
    ]),
     
  418.  
    },
     
  419.  
    },
     
  420.  
    {
     
  421.  
    type: 'CubeRight1',
     
  422.  
    shape: {
     
  423.  
    api,
     
  424.  
    xValue: api.value(0),
     
  425.  
    yValue: api.value(1),
     
  426.  
    x: location[0] - 0,
     
  427.  
    y: location[1],
     
  428.  
    xAxisPoint: api.coord([api.value(0), 0]),
     
  429.  
    },
     
  430.  
    style: {
     
  431.  
    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     
  432.  
    {
     
  433.  
    offset: 0,
     
  434.  
    color: 'rgba(225,155,172, 1)',
     
  435.  
    },
     
  436.  
    {
     
  437.  
    offset: 1,
     
  438.  
    color: 'rgba(225,155,172, .5)',
     
  439.  
    },
     
  440.  
    ]),
     
  441.  
    },
     
  442.  
    },
     
  443.  
    {
     
  444.  
    type: 'CubeTop1',
     
  445.  
    shape: {
     
  446.  
    api,
     
  447.  
    xValue: api.value(0),
     
  448.  
    yValue: api.value(1),
     
  449.  
    x: location[0] - 0,
     
  450.  
    y: location[1],
     
  451.  
    xAxisPoint: api.coord([api.value(0), 0]),
     
  452.  
    },
     
  453.  
    style: {
     
  454.  
    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     
  455.  
    {
     
  456.  
    offset: 0,
     
  457.  
    color: 'rgba(225,155,172, .8)',
     
  458.  
    },
     
  459.  
    {
     
  460.  
    offset: 1,
     
  461.  
    color: 'rgba(225,155,172, .8)',
     
  462.  
    },
     
  463.  
    ]),
     
  464.  
    },
     
  465.  
    },
     
  466.  
    ],
     
  467.  
    };
     
  468.  
    },
     
  469.  
    data: this.VALUE2,
     
  470.  
    },
     
  471.  
    ],
     
  472.  
    }
     
  473.  
    )
     
  474.  
    }
     
  475.  
    }
     
  476.  
    }
     
  477.  
    </script>
     
 

四、第四种效果
 

效果图
 

 

使用步骤
 

完整实例，copy就可直接使用
 

 

  1.  
    <template>
     
  2.  
    <div :class="className" :style="{height:height,width:width}" />
     
  3.  
    </template>
     
  5.  
    <script>
     
  6.  
    import echarts from 'echarts'
     
  7.  
    require('echarts/theme/macarons') // echarts theme
     
  8.  
    import resize from '@/views/dashboard/mixins/resize'
     
  10.  
    export default {
     
  11.  
    mixins: [resize],
     
  12.  
    props: {
     
  13.  
    className: {
     
  14.  
    type: String,
     
  15.  
    default: 'chart'
     
  16.  
    },
     
  17.  
    width: {
     
  18.  
    type: String,
     
  19.  
    default: '100%'
     
  20.  
    },
     
  21.  
    height: {
     
  22.  
    type: String,
     
  23.  
    default: '400px'
     
  24.  
    },
     
  25.  
    dataList: {
     
  26.  
    type: Array,
     
  27.  
    default: []
     
  28.  
    }
     
  29.  
    },
     
  30.  
    data() {
     
  31.  
    return {
     
  32.  
    chart: null,
     
  33.  
    targetData: [50, 60, 40, 80, 120, 90, 70],
     
  34.  
    manualData: [22, 35, 30, 25, 12, 41, 51],
     
  35.  
    mechanismData: [40, 45, 40, 55, 22, 46, 61],
     
  36.  
    xData:['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
     
  37.  
    names:['手工', '机制', '目标值']
     
  38.  
    }
     
  39.  
    },
     
  40.  
    mounted() {
     
  41.  
    this.$nextTick(() => {
     
  42.  
    this.initChart()
     
  43.  
    })
     
  44.  
    },
     
  45.  
    beforeDestroy() {
     
  46.  
    if (!this.chart) {
     
  47.  
    return
     
  48.  
    }
     
  49.  
    this.chart.dispose()
     
  50.  
    this.chart = null
     
  51.  
    },
     
  52.  
    watch: {
     
  53.  
    dataList(val, oldVal) {//普通的watch监听
     
  54.  
    this.initChart()
     
  55.  
    }
     
  56.  
    },
     
  57.  
    methods: {
     
  58.  
    initChart() {
     
  60.  
    const color1 = {
     
  61.  
    type: 'linear',
     
  62.  
    x: 1,
     
  63.  
    y: 0,
     
  64.  
    x2: 1,
     
  65.  
    y2: 1,
     
  66.  
    colorStops: [
     
  67.  
    {
     
  68.  
    offset: 0,
     
  69.  
    color: '#9DCAF4'
     
  70.  
    },
     
  71.  
    {
     
  72.  
    offset: 0.8,
     
  73.  
    color: '#0B87FB'
     
  74.  
    }
     
  75.  
    ]
     
  76.  
    };
     
  78.  
    const color2 = {
     
  79.  
    type: 'linear',
     
  80.  
    x: 1,
     
  81.  
    y: 0,
     
  82.  
    x2: 1,
     
  83.  
    y2: 1,
     
  84.  
    colorStops: [
     
  85.  
    {
     
  86.  
    offset: 0,
     
  87.  
    color: '#31D5C7'
     
  88.  
    },
     
  89.  
    {
     
  90.  
    offset: 0.8,
     
  91.  
    color: 'rgba(29, 39, 115,0.2)'
     
  92.  
    }
     
  93.  
    ]
     
  94.  
    };
     
  96.  
    this.chart = echarts.init(this.$el, 'macarons')
     
  97.  
    this.chart.setOption(
     
  98.  
    {
     
  99.  
    legend: {
     
  100.  
    data: this.names,
     
  101.  
    x: 'right',
     
  102.  
    textStyle: {
     
  103.  
    // 图例文字大小颜色
     
  104.  
    fontSize: 12,
     
  105.  
    color: '#ffffff'
     
  106.  
    }
     
  107.  
    },
     
  108.  
    tooltip: {
     
  109.  
    trigger: 'axis',
     
  110.  
    axisPointer: {
     
  111.  
    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
     
  112.  
    }
     
  113.  
    },
     
  114.  
    grid: {
     
  115.  
    left: '1%',
     
  116.  
    right: '1%',
     
  117.  
    bottom: '2%',
     
  118.  
    top: '12%',
     
  119.  
    containLabel: true
     
  120.  
    },
     
  121.  
    xAxis: {
     
  122.  
    type: 'category',
     
  123.  
    data: this.xData,
     
  124.  
    axisLabel: {
     
  125.  
    color: '#fff'
     
  126.  
    },
     
  127.  
    axisLine: {
     
  128.  
    show: true,
     
  129.  
    lineStyle: {
     
  130.  
    color: 'rgba(255, 255, 2555, 0.1)'
     
  131.  
    }
     
  132.  
    }
     
  133.  
    },
     
  134.  
    yAxis: [
     
  135.  
    {
     
  136.  
    type: 'value',
     
  137.  
    name: '制作数量',
     
  138.  
    axisLabel: {
     
  139.  
    color: '#fff',
     
  140.  
    axisLabel: {
     
  141.  
    color: '#fff',
     
  142.  
    //y轴文字的配置
     
  143.  
    textStyle: {
     
  144.  
    color: "#fff",
     
  145.  
    },
     
  146.  
    },
     
  147.  
    },
     
  148.  
    splitLine: {
     
  149.  
    show: true,
     
  150.  
    lineStyle: {
     
  151.  
    color: 'rgba(255,255,255,0.2)'
     
  152.  
    }
     
  153.  
    },
     
  154.  
    nameTextStyle: {
     
  155.  
    //y轴上方单位的颜色
     
  156.  
    color: "#fff",
     
  157.  
    },
     
  158.  
    },
     
  159.  
    {
     
  160.  
    type: 'value',
     
  161.  
    name: '目标值',
     
  162.  
    min: 0,
     
  163.  
    max: 250,
     
  164.  
    interval: 50,
     
  165.  
    axisLabel: {
     
  166.  
    color: '#fff',
     
  167.  
    //y轴文字的配置
     
  168.  
    textStyle: {
     
  169.  
    color: "#fff",
     
  170.  
    },
     
  171.  
    },
     
  172.  
    splitLine: {
     
  173.  
    show: false,
     
  174.  
    lineStyle: {
     
  175.  
    color: 'rgba(255,255,255,0.2)'
     
  176.  
    }
     
  177.  
    },
     
  178.  
    nameTextStyle: {
     
  179.  
    //y轴上方单位的颜色
     
  180.  
    color: "#fff",
     
  181.  
    },
     
  182.  
    }
     
  183.  
    ],
     
  184.  
    series: [
     
  185.  
    {
     
  186.  
    itemStyle: {
     
  187.  
    normal: {
     
  188.  
    // 这里是用一个柱子，从左到右的渐变。也可以用两个柱子做从上往下的渐变，和上面的透明渐变一样用法
     
  189.  
    color: color1
     
  190.  
    }
     
  191.  
    },
     
  192.  
    data: this.manualData,
     
  193.  
    type: 'bar',
     
  194.  
    barWidth: 19,
     
  195.  
    z: 2,
     
  196.  
    name: this.names[0]
     
  197.  
    },
     
  198.  
    {
     
  199.  
    z: 3,
     
  200.  
    name: this.names[0],
     
  201.  
    type: 'pictorialBar',
     
  202.  
    // 柱子顶部
     
  203.  
    symbolPosition: 'end',
     
  204.  
    data: this.manualData,
     
  205.  
    symbol: 'diamond',
     
  206.  
    symbolOffset: ['-12', -11],
     
  207.  
    symbolRotate: 90,
     
  208.  
    symbolSize: [10, 21],
     
  209.  
    itemStyle: {
     
  210.  
    normal: {
     
  211.  
    borderWidth: 1,
     
  212.  
    color: 'blue'
     
  213.  
    }
     
  214.  
    },
     
  215.  
    tooltip: {
     
  216.  
    show: false
     
  217.  
    }
     
  218.  
    },
     
  220.  
    {
     
  221.  
    itemStyle: {
     
  222.  
    normal: {
     
  223.  
    // 这里是用一个柱子，从左到右的渐变。也可以用两个柱子做从上往下的渐变，和上面的透明渐变一样用法
     
  224.  
    color: color2
     
  225.  
    }
     
  226.  
    },
     
  227.  
    data: this.mechanismData,
     
  228.  
    type: 'bar',
     
  229.  
    barWidth: 19,
     
  230.  
    z: 2,
     
  231.  
    name: this.names[1]
     
  232.  
    },
     
  233.  
    {
     
  234.  
    z: 3,
     
  235.  
    name: this.names[1],
     
  236.  
    type: 'pictorialBar',
     
  237.  
    // 柱子顶部
     
  238.  
    symbolPosition: 'end',
     
  239.  
    data: this.mechanismData,
     
  240.  
    symbol: 'diamond',
     
  241.  
    symbolOffset: [12, -11],
     
  242.  
    symbolRotate: 90,
     
  243.  
    symbolSize: [8, 19],
     
  244.  
    itemStyle: {
     
  245.  
    normal: {
     
  246.  
    borderWidth: 1,
     
  247.  
    color: 'green'
     
  248.  
    }
     
  249.  
    },
     
  250.  
    tooltip: {
     
  251.  
    show: false
     
  252.  
    }
     
  253.  
    },
     
  255.  
    {
     
  256.  
    name: this.names[2],
     
  257.  
    type: 'line',
     
  258.  
    yAxisIndex: 1,
     
  259.  
    data: this.targetData,
     
  260.  
    itemStyle: {
     
  261.  
    normal: {
     
  262.  
    color: '#FFDE55', //圈圈的颜色
     
  263.  
    lineStyle: {
     
  264.  
    color: '#FFDE55' //线的颜色
     
  265.  
    }
     
  266.  
    }
     
  267.  
    }
     
  268.  
    }
     
  269.  
    ]
     
  270.  
    }
     
  271.  
    )
     
  272.  
    }
     
  273.  
    }
     
  274.  
    }
     
  275.  
    </script>
     
 

五、第五种效果
 

效果图
 

 

使用步骤
 

完整实例，copy就可直接使用
 

 

  1.  
    <template>
     
  2.  
    <div :class="className" :style="{height:height,width:width}" />
     
  3.  
    </template>
     
  5.  
    <script>
     
  6.  
    import echarts from 'echarts'
     
  7.  
    require('echarts/theme/macarons') // echarts theme
     
  8.  
    import resize from '@/views/dashboard/mixins/resize'
     
  10.  
    export default {
     
  11.  
    mixins: [resize],
     
  12.  
    props: {
     
  13.  
    className: {
     
  14.  
    type: String,
     
  15.  
    default: 'chart'
     
  16.  
    },
     
  17.  
    width: {
     
  18.  
    type: String,
     
  19.  
    default: '100%'
     
  20.  
    },
     
  21.  
    height: {
     
  22.  
    type: String,
     
  23.  
    default: '400px'
     
  24.  
    },
     
  25.  
    dataList: {
     
  26.  
    type: Array,
     
  27.  
    default: []
     
  28.  
    },
     
  29.  
    titleName: {
     
  30.  
    type: String,
     
  31.  
    default: 'echarts'
     
  32.  
    },
     
  33.  
    names: {
     
  34.  
    type: Array,
     
  35.  
    default: ['成本', '目标']
     
  36.  
    }
     
  37.  
    },
     
  38.  
    data() {
     
  39.  
    return {
     
  40.  
    chart: null,
     
  41.  
    sourceList: [],
     
  42.  
    listData1: [],
     
  43.  
    dataBottom: [],
     
  44.  
    listData2: [],
     
  45.  
    max: 0,
     
  46.  
    maxDate1: 0,
     
  47.  
    maxDate2: 0,
     
  48.  
    }
     
  49.  
    },
     
  50.  
    mounted() {
     
  51.  
    this.$nextTick(() => {
     
  52.  
    this.initChart()
     
  53.  
    })
     
  54.  
    },
     
  55.  
    beforeDestroy() {
     
  56.  
    if (!this.chart) {
     
  57.  
    return
     
  58.  
    }
     
  59.  
    this.chart.dispose()
     
  60.  
    this.chart = null
     
  61.  
    },
     
  62.  
    watch: {
     
  63.  
    dataList(val, oldVal) {//普通的watch监听
     
  64.  
    this.initChart()
     
  65.  
    }
     
  66.  
    },
     
  67.  
    methods: {
     
  68.  
    initChart() {
     
  69.  
    this.chart = echarts.init(this.$el, 'macarons')
     
  70.  
    this.sourceList = []
     
  71.  
    this.listData1 = []
     
  72.  
    this.listData2 = []
     
  73.  
    for (let i = 0; i < this.dataList.length; i++) {
     
  74.  
    this.sourceList.push(this.dataList[i].techName)
     
  75.  
    this.listData1.push((this.dataList[i].oneNum))
     
  76.  
    this.dataBottom.push(1)
     
  77.  
    this.listData2.push(this.dataList[i].twoNum)
     
  78.  
    }
     
  79.  
    this.sourceList = ["2024","2023","2022","2021","2020","2019","2018"]
     
  80.  
    this.listData1 = [12,10,0,9,0,5,8]
     
  81.  
    this.dataBottom = [1,1,1,1,1,1,1]
     
  82.  
    this.listData2 = [11,12,15,6,22,15,10]
     
  83.  
    //获取纵坐标最大值--start
     
  84.  
    this.maxDate1 = this.listData1[0];
     
  85.  
    for (let i = 0; i < this.listData1.length; i++) {
     
  86.  
    let item = this.listData1[i];
     
  87.  
    item > this.maxDate1 ? this.maxDate1 = item : this.maxDate1 = this.maxDate1;
     
  88.  
    }
     
  89.  
    this.maxDate2 = this.listData2[0];
     
  90.  
    for (let i = 0; i < this.listData2.length; i++) {
     
  91.  
    let item = this.listData2[i];
     
  92.  
    item > this.maxDate2 ? this.maxDate2 = item : this.maxDate2 = this.maxDate2;
     
  93.  
    }
     
  94.  
    this.maxDate1 = this.maxDate1 + 1
     
  95.  
    this.maxDate2 = this.maxDate2 + 1
     
  96.  
    //获取纵坐标最大值--end
     
  97.  
    this.chart.setOption({
     
  98.  
    tooltip: {
     
  99.  
    trigger: 'axis',
     
  100.  
    axisPointer: {
     
  101.  
    type: 'cross',
     
  102.  
    label: {
     
  103.  
    backgroundColor: '#6a7985'
     
  104.  
    }
     
  105.  
    },
     
  106.  
    formatter: function (params) {
     
  107.  
    var str = '<div style=" font-size: 16px;color:#FFFFFF">'
     
  108.  
    str = str + params[0].name + '<br>'
     
  109.  
    params.filter(function (item) {
     
  110.  
    if (item.componentSubType === 'bar' || item.componentSubType === 'line') {
     
  111.  
    str = str + item.seriesName + '：' + item.data + '<br>'
     
  112.  
    }
     
  113.  
    })
     
  114.  
    str = str + '</div>'
     
  115.  
    return str;
     
  116.  
    }
     
  117.  
    },
     
  118.  
    toolbox: {
     
  119.  
    feature: {
     
  120.  
    dataView: { show: true, readOnly: true },
     
  121.  
    magicType: { show: true, type: ['line', 'bar'] },
     
  122.  
    restore: { show: true },
     
  123.  
    saveAsImage: { show: true, backgroundColor: '#79B9F5', name: this.titleName }
     
  124.  
    },
     
  125.  
    right: '20px',
     
  126.  
    },
     
  127.  
    grid: {
     
  128.  
    left: '3%',
     
  129.  
    right: '3%',
     
  130.  
    bottom: '3%',
     
  131.  
    containLabel: true
     
  132.  
    },
     
  133.  
    legend: {
     
  134.  
    data: this.names,
     
  135.  
    left: '20px',
     
  136.  
    textStyle: {
     
  137.  
    color: '#FFFFFF'
     
  138.  
    }
     
  139.  
    },
     
  140.  
    xAxis: [
     
  141.  
    {
     
  142.  
    type: 'category',
     
  143.  
    data: this.sourceList,
     
  144.  
    axisLine: {
     
  145.  
    //x轴线的颜色以及宽度
     
  146.  
    show: true,
     
  147.  
    lineStyle: {
     
  148.  
    color: "#FFFFFF",
     
  149.  
    type: "solid",
     
  150.  
    },
     
  151.  
    },
     
  152.  
    axisPointer: {
     
  153.  
    type: 'shadow'
     
  154.  
    },
     
  155.  
    axisLabel: {
     
  156.  
    show: true,
     
  157.  
    rotate: 45, // 设置x轴标签旋转角度
     
  158.  
    margin: 15
     
  159.  
    }
     
  160.  
    }
     
  161.  
    ],
     
  162.  
    yAxis: [
     
  163.  
    {
     
  164.  
    type: 'value',
     
  165.  
    name: this.names[0],
     
  166.  
    axisLabel: {
     
  167.  
    //y轴文字的配置
     
  168.  
    textStyle: {
     
  169.  
    color: "#fff",
     
  170.  
    },
     
  171.  
    },
     
  172.  
    axisLine: {
     
  173.  
    //y轴线的颜色以及宽度
     
  174.  
    show: true,
     
  175.  
    lineStyle: {
     
  176.  
    color: "#fff",
     
  177.  
    width: 1,
     
  178.  
    type: "solid",
     
  179.  
    },
     
  180.  
    },
     
  181.  
    splitLine: {
     
  182.  
    //分割线配置
     
  183.  
    show: false,
     
  184.  
    lineStyle: {
     
  185.  
    color: "#fff",
     
  186.  
    },
     
  187.  
    },
     
  188.  
    nameTextStyle: {
     
  189.  
    //y轴上方单位的颜色
     
  190.  
    color: "#fff",
     
  191.  
    },
     
  192.  
    max: this.maxDate1
     
  193.  
    },
     
  194.  
    {
     
  195.  
    type: 'value',
     
  196.  
    name: this.names[1],
     
  197.  
    axisLabel: {
     
  198.  
    //y轴文字的配置
     
  199.  
    textStyle: {
     
  200.  
    color: "#fff",
     
  201.  
    },
     
  202.  
    },
     
  203.  
    axisLine: {
     
  204.  
    //y轴线的颜色以及宽度
     
  205.  
    show: true,
     
  206.  
    lineStyle: {
     
  207.  
    color: "#fff",
     
  208.  
    width: 1,
     
  209.  
    type: "solid",
     
  210.  
    },
     
  211.  
    },
     
  212.  
    splitLine: {
     
  213.  
    //分割线配置
     
  214.  
    show: false,
     
  215.  
    lineStyle: {
     
  216.  
    color: "#fff",
     
  217.  
    },
     
  218.  
    },
     
  219.  
    nameTextStyle: {
     
  220.  
    //y轴上方单位的颜色
     
  221.  
    color: "#fff",
     
  222.  
    },
     
  223.  
    //设置纵坐标最大值
     
  224.  
    max: this.maxDate2
     
  225.  
    },
     
  226.  
    ],
     
  227.  
    series: [
     
  228.  
    {
     
  229.  
    itemStyle: {
     
  230.  
    normal: {
     
  231.  
    // 这里是用一个柱子，从左到右的渐变。也可以用两个柱子做从上往下的渐变，和上面的透明渐变一样用法
     
  232.  
    color: {
     
  233.  
    type: 'linear',
     
  234.  
    x: 1,
     
  235.  
    y: 0,
     
  236.  
    x2: 1,
     
  237.  
    y2: 1,
     
  238.  
    colorStops: [
     
  239.  
    { offset: 0, color: '#83bff6' },
     
  240.  
    { offset: 0.5, color: '#188df0' },
     
  241.  
    { offset: 1, color: 'blue' }
     
  242.  
    ]
     
  243.  
    }
     
  244.  
    }
     
  245.  
    },
     
  246.  
    data: this.listData1,
     
  247.  
    type: 'bar',
     
  248.  
    barWidth: 40,
     
  249.  
    tooltip: {
     
  250.  
    valueFormatter: function (value) {
     
  251.  
    return value;
     
  252.  
    }
     
  253.  
    },
     
  254.  
    z: 2,
     
  255.  
    name: this.names[0]
     
  256.  
    },
     
  257.  
    // 底部的光晕
     
  258.  
    {
     
  259.  
    name: this.names[0],
     
  260.  
    type: 'pictorialBar',
     
  261.  
    tooltip: {
     
  262.  
    show: false
     
  263.  
    },
     
  264.  
    symbolSize: [60, 20],
     
  265.  
    symbolOffset: [0, 10],
     
  266.  
    z: 1,
     
  267.  
    itemStyle: {
     
  268.  
    normal: {
     
  269.  
    color: 'transparent',
     
  270.  
    borderColor: '#26B2E8',
     
  271.  
    borderType: 'solid',
     
  272.  
    borderWidth: 2
     
  273.  
    }
     
  274.  
    },
     
  275.  
    data: this.dataBottom
     
  276.  
    },
     
  277.  
    {
     
  278.  
    //底部圆片
     
  279.  
    name: this.names[0],
     
  280.  
    type: 'pictorialBar',
     
  281.  
    symbolSize: [40, 15],
     
  282.  
    symbolOffset: [0, 5],
     
  283.  
    z: 12,
     
  284.  
    itemStyle: {
     
  285.  
    opacity: 1,
     
  286.  
    color: 'blue',
     
  287.  
    borderColor: '#03529A'
     
  288.  
    },
     
  289.  
    data: this.dataBottom
     
  290.  
    },
     
  291.  
    //头部圆片
     
  292.  
    {
     
  293.  
    name: this.names[0], // 头部
     
  294.  
    type: 'pictorialBar',
     
  295.  
    symbolSize: [40, 15],
     
  296.  
    symbolOffset: [0, -7],
     
  297.  
    z: 3,
     
  298.  
    symbolPosition: 'end',
     
  299.  
    itemStyle: {
     
  300.  
    color: '#188df0',
     
  301.  
    opacity: 1
     
  302.  
    },
     
  303.  
    data: this.listData1
     
  304.  
    },
     
  305.  
    {
     
  306.  
    name: this.names[1],
     
  307.  
    type: 'line',
     
  308.  
    z: 12,
     
  309.  
    yAxisIndex: 1,
     
  310.  
    tooltip: {
     
  311.  
    valueFormatter: function (value) {
     
  312.  
    return value;
     
  313.  
    }
     
  314.  
    },
     
  315.  
    lineStyle: {
     
  316.  
    normal: {
     
  317.  
    width: 3 //折线宽度
     
  318.  
    },
     
  319.  
    },
     
  320.  
    itemStyle: {
     
  321.  
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     
  322.  
    { offset: 0, color: '#93CE07' },
     
  323.  
    { offset: 0.2, color: '#FBDB0F' },
     
  324.  
    { offset: 0.4, color: '#FC7D02' },
     
  325.  
    { offset: 0.6, color: '#FD0100' },
     
  326.  
    { offset: 0.8, color: '#AA069F' },
     
  327.  
    { offset: 1, color: '#AC3B2A' }
     
  328.  
    ])
     
  329.  
    },
     
  330.  
    data: this.listData2
     
  331.  
    }
     
  332.  
    ]
     
  333.  
    })
     
  334.  
    }
     
  335.  
    }
     
  336.  
    }
     
  337.  
    </script>
     
 

六、3D饼图实现
 

vue中如何使用echarts和echarts-gl实现3D饼图环形饼图_echarts 3d饼图-CSDN博客
 

七、Echarts：象形柱图实现水塔水位的动画、水球图和液位柱子图 
 

Echarts：象形柱图实现水塔水位的动画、水球图和液位柱子图_echarts html 液位柱子图-CSDN博客
 

八、3D折线图实现
 

vue中如何使用echarts和echarts-gl实现三维折线图-CSDN博客
 

resize.js 
 

 

  1.  
    import { debounce } from '@/utils'
     
  3.  
    export default {
     
  4.  
    data() {
     
  5.  
    return {
     
  6.  
    $_sidebarElm: null,
     
  7.  
    $_resizeHandler: null
     
  8.  
    }
     
  9.  
    },
     
  10.  
    mounted() {
     
  11.  
    this.initListener()
     
  12.  
    },
     
  13.  
    activated() {
     
  14.  
    if (!this.$_resizeHandler) {
     
  15.  
    // avoid duplication init
     
  16.  
    this.initListener()
     
  17.  
    }
     
  19.  
    // when keep-alive chart activated, auto resize
     
  20.  
    this.resize()
     
  21.  
    },
     
  22.  
    beforeDestroy() {
     
  23.  
    this.destroyListener()
     
  24.  
    },
     
  25.  
    deactivated() {
     
  26.  
    this.destroyListener()
     
  27.  
    },
     
  28.  
    methods: {
     
  29.  
    // use $_ for mixins properties
     
  30.  
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
     
  31.  
    $_sidebarResizeHandler(e) {
     
  32.  
    if (e.propertyName === 'width') {
     
  33.  
    this.$_resizeHandler()
     
  34.  
    }
     
  35.  
    },
     
  36.  
    initListener() {
     
  37.  
    this.$_resizeHandler = debounce(() => {
     
  38.  
    this.resize()
     
  39.  
    }, 100)
     
  40.  
    window.addEventListener('resize', this.$_resizeHandler)
     
  42.  
    this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
     
  43.  
    this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
     
  44.  
    },
     
  45.  
    destroyListener() {
     
  46.  
    window.removeEventListener('resize', this.$_resizeHandler)
     
  47.  
    this.$_resizeHandler = null
     
  49.  
    this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
     
  50.  
    },
     
  51.  
    resize() {
     
  52.  
    const { chart } = this
     
  53.  
    chart && chart.resize()
     
  54.  
    }
     
  55.  
    }
     
  56.  
    }
     
 

防抖函数 
 

 

  1.  
    /**
     
  2.  
    * @param {Function} fn 防抖函数
     
  3.  
    * @param {Number} delay 延迟时间
     
  4.  
    */
     
  5.  
    export function debounce(fn, delay) {
     
  6.  
    var timer;
     
  7.  
    return function () {
     
  8.  
    var context = this;
     
  9.  
    var args = arguments;
     
  10.  
    clearTimeout(timer);
     
  11.  
    timer = setTimeout(function () {
     
  12.  
    fn.apply(context, args);
     
  13.  
    }, delay);
     
  14.  
    };
     
  15.  
    }
     
 

 

文章知识点与官方知识档案匹配，可进一步学习相关知识
 

Vue入门技能树首页概览42665 人正在系统学习中
 

关注博主即

                

        

        

    




            

                    
            

    

      

        

            

              
                
                  Ρause
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    4
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    6
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
03-echarts如何画立体柱状图

				
			

			

				

					jiuliangliang的博客
				

				

					04-15
					
					1759
					
				

			

		

		

			
				
这个方法里面先创建三个形状的空壳子，并注册，如下图，并且注册完成以后在这个方法里面调用构建图表的方法initChart，在初始化页面的时候就不用调用initChart方法了。那么坐标是怎么看的，那么左上角的话就是（0，0），右上角就是（500，0），左下角就是（0，500），右下角就是（500，500），相当于右边是X轴正轴，往下看是Y轴正轴。根据官网提示，需要返回一个type为group的对象，并且将三个面都加到children里面，如下图，P2：【基础X轴坐标点+侧面宽度，顶部Y轴坐标点- 斜角高度】

			
		

	



                

              
                



	

		

			

				
					
echart实现3D柱状图效果

				
			

			

				

					01-31
				

			

		

		

			
				
echart.js实现动态3D效果，酷炫的效果，值得研究看看哈

			
		

	



                


  
              

                


	

		

			

				
					
echarts实现3D柱状图（视觉层面）和3D饼图

				
			

			

				

					布克吉的博客
				

				

					06-06
					
					1万+
					
				

			

		

		

			
				
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，

			
		

	





	

		

			

				
					
echarts绘制三维柱状图

					
最新发布

				
			

			

				

					pengbr的博客
				

				

					06-02
					
					1349
					
				

			

		

		

			
				
echarts
ECharts 是一个使用 JavaScript 实现的开源可视化库，主要用于数据的可视化展示。ECharts 支持丰富的图表类型，如折线图、柱状图、饼图、地图、K线图等，可以满足不同类型数据的展示需求。
文档地址：echarts
本次所绘制三维柱状图主要使用的是示例源代码，在此基础上做了些修改。
引入CDN
使用echarts需要导入echarts和echarts-gl。
免费的CDN服务可访问网址：Staticfile CDN
<!-- 引入 ECharts 文件 -->
&

			
		

	



		

			
		



	

		

			

				
					
echarts实现3D效果柱状图

				
			

			

				

					dqfkkll的博客
				

				

					09-14
					
					1万+
					
				

			

		

		

			
				
echarts3D效果柱状图的实现
这个太难了，我花了两天终于调成我想要的效果啦~，开心，要是官网上有例子就好了，太难调了。不过功夫不负有心人，话不多说，看代码吧
效果图：

html代码
<div id="jczy_bar" :canvas="3D" style="height: 240px;width:600px;margin: 0 auto;"></div>

JS代码
// 调用
var serveTBar = echarts.init(document.getElement

			
		

	





	

		

			

				
					
echarts 3D 柱状图

				
			

			

				

					aibujin的博客
				

				

					05-20
					
					1万+
					
				

			

		

		

			
				
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画

			
		

	





	

		

			

				
					
echarts实现3d柱状图的两种方式

					
热门推荐

				
			

			

				

					weixin_69773376的博客
				

				

					12-06
					
					1万+
					
				

			

		

		

			
				
echarts实现3d柱状图效果

			
		

	





	

		

			

				
					
echarts 实现 3d 柱状图

				
			

			

				

					weixin_38992765的博客
				

				

					07-28
					
					5359
					
				

			

		

		

			
				
echart+vue3 实现 3d 柱状图

			
		

	





	

		

			

				
					
echarts实现河北地图下钻可以下钻到县级

				
			

			

				

					06-04
				

			

		

		

			
				
 Echarts是百度公司开发的一款开源的、跨浏览器的数据可视化图表库，支持多种图表类型，如柱状图、折线图、饼图以及地图等。它基于SVG、VML和Canvas技术，能够适应各种浏览器环境，并且拥有良好的性能和交互体验。  ...

			
		

	





	

		

			

				
					
Echarts 实现的可视化数据大屏

				
			

			

				

					05-27
				

			

		

		

			
				
Echarts 是一个由百度开发的开源 JavaScript 图表库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，适用于数据可视化和信息展示。本项目是一个利用 Echarts 实现的可视化数据大屏，旨在帮助用户以...

			
		

	





	

		

			

				
					
Eharts地图扩展所有县级geoJson数据

				
			

			

				

					07-19
				

			

		

		

			
				
ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图等，以及强大的地图功能。在ECharts中，地图的绘制通常依赖于地理坐标系统（GeoJSON）的数据，这是一种开放的标准格式...

			
		

	





	

		

			

				
					
EChartsNet-master_C#_C#winform_echarts_

				
			

			

				

					10-03
				

			

		

		

			
				
ECharts本身是百度开发的一个开源JavaScript图表库，它提供了丰富的交互式图表，包括折线图、柱状图、饼图、散点图等多种图表类型，适用于大数据可视化。EChartsNet则将这个强大的JavaScript库与.NET框架相结合，...

			
		

	





	

		

			

				
					
基于Echarts的22个可视化大盘静态前台页面

				
			

			

				

					06-24
				

			

		

		

			
				
在这个“基于Echarts的22个可视化大盘静态前台页面”项目中，我们可以预见到包含多种不同类型的可视化图表，如柱状图、折线图、饼图、散点图、热力图、地图等，这些图表可以帮助我们从不同角度和层面解读数据。...

			
		

	





	

		

			

				
					
echarts制作3d柱形图

				
			

			

				

					泪的结晶的博客
				

				

					11-24
					
					5012
					
				

			

		

		

			
				
1.引入echarts

2.main.js引入


import * as echarts from 'echarts'
import 'echarts-gl';
Vue.prototype.$echarts = echarts

3.页面制作






<template>
  <div id="output_3DBarCharts"></div>
</template>

<script>
  import { get3DOptions .

			
		

	





	

		

			

				
					
echarts 3d柱状图

				
			

			

				

					徐___L
				

				

					02-16
					
					3362
					
				

			

		

		

			
				
echarts 3d柱状图

			
		

	





	

		

			

				
					
echarts 3D柱状图

				
			

			

				

					nbclasszj的博客
				

				

					10-12
					
					1923
					
				

			

		

		

			
				
echarts 3D柱状图

			
		

	





	

		

			

				
					
echarts--3D效果柱状图

				
			

			

				

					生命不息，学习不止
				

				

					07-05
					
					1375
					
				

			

		

		

			
				
柱状图实现3D效果

			
		

	





	

		

			

				
					
Echarts实现3D柱状图

				
			

			

				

					qq_45787691的博客
				

				

					04-22
					
					1320
					
				

			

		

		

			
				
echarts实现3D柱状图。

			
		

	





	

		

			

				
					
echarts实现多3D立体柱状图

				
			

			

				

					Dalin0929的博客
				

				

					11-26
					
					1万+
					
				

			

		

		

			
				
效果图：

实现代码：
// 立体多柱状图
function getSolidOption(data1, data2, data3) {
  // 月份坐标轴
  var nowMonth = new Date().getMonth() + 1;
  var lineXAxisData = [];
  for (var i = 5; i >= 0; i--) {
    var month = nowMonth - i;
    if (month < 1) {
      lineXAxisD

			
		

	





	

		

			

				
					
echarts实现3D柱状图

				
			

			

				

					07-27
				

			

		

		

			
				
要实现echarts的3D柱状图，可以参考以下步骤：

1. 首先，你可以查看echarts官方网站，了解echarts自定义图形的详细用法。\[1\]

2. 参考你提供的案例，可以创建左右两个面，也就是两个柱子。为了形成一点对比，可以稍微调整左右两个面的颜色。同时，可以使用"type: 'pictorialBar'"来实现底部和顶部的效果。\[2\]

3. 在代码中，可以设置柱状图的柱宽（barWidth）为一个固定值，例如30。如果改动这个值导致柱子形状变形，可以调整series中每一个对象的symbolOffset的值。\[3\]

4. 对于双柱状图，可以在series数组中定义多个元素，前几个元素表示"本期"柱状图，后几个元素表示"同期"柱状图。每个柱子都由上中下三部分组成，因此需要定义多个series元素来表示柱子的主体部分、底部和顶部。为了达到整体性的效果，每个柱状图的三部分颜色需要统一。\[3\]

通过以上步骤，你可以实现echarts的3D柱状图。希望对你有帮助！
#### 引用[.reference_title]
-  *1* [echarts实现3d柱状图的两种方式](https://blog.csdn.net/weixin_69773376/article/details/128199545)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
-  *2* [echarts 3d柱状图](https://blog.csdn.net/xuyanl/article/details/128011860)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
-  *3* [echarts实现3D效果柱状图](https://blog.csdn.net/dqfkkll/article/details/120287486)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值