echarts 自定义柱状图 bar,effectScatter,pictorialBar

已于 2022-07-08 17:38:03 修改
阅读量840 收藏 7
点赞数 1
文章标签： echarts javascript ecmascript vue
于 2022-07-08 17:35:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lys1925/article/details/125682923
版权

效果、代码如下在这里插入图片描述

<template>
<div style=" width: 1131px; height: 620px; " ref="myChart"></div>
</template>
<script>
import * as echarts from 'echarts'

    export default {
        data() {
            return {
           
            }
        },
      mounted() {
        let myChart = echarts.init(this.$refs.myChart)
        this.initChart(myChart,echarts)
      },
      methods: {

            initChart(myChart, echarts) {
                var option = {}
                let v2L2Chart = {
                    xData: ['2019年', '2020年', '2021年', '2022年'],
                    data: [212, 305, 260, 283],
                    max: 500,
                    color: ['rgba(253, 221, 97,  1)', 'rgba(107, 255, 243,  1)', 'rgba(119, 191, 255, 1)', 'rgba(0, 72, 203,1)', ]
                };
                option = {
                    backgroundColor: '#000',
                    grid: {
                        top: '5%',
                        left: '10%',
                        right: '9%',
                        bottom: '40%',
                    },
                    tooltip: {
                        show: true,
                        formatter: function(params) {
                            let text = '<p  style="font-size:16px;font-weight: 400;color:rgba(255, 255, 255, 1);margin-bottom: 20px;"><span style="display:inline-block;width:10px;height: 10px;background: ' + v2L2Chart.color[params.dataIndex] + ';border-radius: 50%;margin-right: 10px;"></span>' + v2L2Chart.xData[params.dataIndex] + '：' + v2L2Chart.data[params.dataIndex] + '个</p>';
                            return text
                        },
                        // formatter: (params) => {
                        //     return v2L2Chart.xData[params.dataIndex] + ':' + v2L2Chart.data[params.dataIndex] + '个';

                        // },
                        backgroundColor: 'rgba(38, 68, 110, 0.8)',
                        padding: 10,
                        borderColor: 'rgba(38, 68, 110, 1)',
                        textStyle: {
                            color: '#fff',
                        }
                    },

                    xAxis: {
                        offset: 20,
                        data: v2L2Chart.xData,
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 16,
                            },
                        },
                    },
                    yAxis: {
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                    },
                    series: [
                        //'最低下的圆片',
                        {
                            name: '最低下的圆片',
                            stack: 'a',
                            // type: 'pictorialBar',
                            // symbolSize: [66, 12],
                            // symbolOffset: [0, 6],
                            type: 'effectScatter',
                            symbolSize: [62, 12],
                            symbolOffset: [0, 0],
                            z: 22,
                            data: [{
                                    name: '',
                                    value: '0',
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(253, 221, 97,  1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(251, 171, 88,   1)',
                                                },
                                            ]),
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: '0',
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(107, 255, 243,  1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(8, 177, 255, 1)',
                                                },
                                            ]),
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: '0',
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(119, 191, 255, 1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(102, 155, 255, 1)',
                                                },
                                            ]),
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: '0',
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(14, 195, 255, 1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(0, 72, 203,  1)',
                                                },
                                            ]),
                                        },
                                    },
                                },
                            ],
                        },
                        //下半截柱状图
                        {
                            name: '下半截柱状图',
                            stack: 'a',
                            type: 'bar',
                            barWidth: 66,
                            z: 2,
                            barGap: '-100%',
                            data: [{
                                    name: '',
                                    value: '212',
                                    itemStyle: {
                                        normal: {
                                            color: {
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                type: 'linear',
                                                global: false,
                                                colorStops: [{
                                                        //第一节下面
                                                        offset: 0,
                                                        color: 'rgba(251, 171, 88, 0.8)',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(253, 227, 100,0.8)',
                                                    },
                                                ],
                                            },
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: '305',
                                    itemStyle: {
                                        normal: {
                                            color: {
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                type: 'linear',
                                                global: false,
                                                colorStops: [{
                                                        //第二个柱状图下面

                                                        offset: 0,
                                                        color: 'rgba(8, 177, 255, 0.8)',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(107, 255, 243, 0.8)',
                                                    },
                                                ],
                                            },
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: '260',
                                    itemStyle: {
                                        normal: {
                                            color: {
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                type: 'linear',
                                                global: false,
                                                colorStops: [{
                                                        //第三个柱状图下半截
                                                        offset: 0,
                                                        color: 'rgba(119, 191, 255, 0.8)',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(102, 155, 255, 0.8)',
                                                    },
                                                ],
                                            },
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: '283',
                                    itemStyle: {
                                        normal: {
                                            color: {
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                type: 'linear',
                                                global: false,
                                                colorStops: [{
                                                        //第三个柱状图下半截
                                                        offset: 0,
                                                        color: 'rgba(0, 72, 203,0.8)',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(14, 195, 255, 0.8)',
                                                    },
                                                ],
                                            },
                                        },
                                    },
                                },
                            ],
                        },
                        //替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20'
                        {
                            name: '替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20',
                            // stack: 'a',
                            type: 'bar',
                            barWidth: 66,
                            barGap: '-100%',
                            stack: '广告',
                            itemStyle: {
                                color: 'transparent',
                            },
                            data: [212, 305, 260, 283],
                        },
                        //头部1
                        {
                            name: '头部1',
                            stack: 'a',
                            type: 'pictorialBar',
                            symbolSize: [66, 12],
                            symbolOffset: [0, -6],
                            z: 22,
                            data: [
                                {
                                    name: '',
                                    value: '212',
                                    symbolPosition: 'end',
                                    label: {
                                        formatter: '{c} 个',
                                        color: '#fff',
                                        offset: [0, -5],
                                        show: true,
                                        position: 'top',
                                        fontSize: 18,
                                        fontWeight: 400,
                                        fontFamily: 'zcool-gdh',
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1,
                                                [{
                                                        offset: 0,
                                                        color: 'rgba(251, 171, 88, 1)',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(253, 227, 100,  1)',
                                                    },
                                                ],
                                                false
                                            ),
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: '305',
                                    symbolPosition: 'end',
                                    label: {
                                        formatter: '{c} 个',
                                        color: '#fff',
                                        offset: [0, -5],
                                        show: true,
                                        position: 'top',
                                        fontSize: 18,
                                        fontWeight: 400,
                                        fontFamily: 'zcool-gdh',
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1,
                                                [{
                                                        offset: 0,
                                                        color: 'rgba(8, 177, 255,   1)',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(107, 255, 243,    1)',
                                                    },
                                                ],
                                                false
                                            ),
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: '260',
                                    symbolPosition: 'end',
                                    label: {
                                        formatter: '{c} 个',
                                        color: '#fff',
                                        offset: [0, -5],
                                        show: true,
                                        position: 'top',
                                        fontSize: 18,
                                        fontWeight: 400,
                                        fontFamily: 'zcool-gdh',
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1,
                                                [{
                                                        offset: 0,
                                                        color: 'rgba(119, 191, 255,  1)',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(102, 155, 255,    1)',
                                                    },
                                                ],
                                                false
                                            ),
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: '283',
                                    symbolPosition: 'end',
                                    label: {
                                        formatter: '{c} 个',
                                        color: '#fff',
                                        offset: [0, -5],
                                        show: true,
                                        position: 'top',
                                        fontSize: 18,
                                        fontWeight: 400,
                                        fontFamily: 'zcool-gdh',
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1,
                                                [{
                                                        offset: 0,
                                                        color: 'rgba(0, 72, 203,  1)',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(14, 195, 255,  1)',
                                                    },
                                                ],
                                                false
                                            ),
                                        },
                                    },
                                },
                            ],
                        },
                        //头部2
                        {
                            name: '头部2',
                            stack: 'a',
                            type: 'pictorialBar',
                            symbolSize: [66, 12],
                            symbolOffset: [0, -6],
                            z: 22,
                            data: [
                                {
                                    name: '',
                                    value: v2L2Chart.max,
                                    symbolPosition: 'end',
                                    itemStyle: {
                                        normal: {
                                            color: {
                                                type: 'radial',
                                                x: 0.5,
                                                y: 0.6,
                                                r: 0.5,
                                                colorStops: [{
                                                        offset: 0,
                                                        color: 'rgba(253, 224, 99, 0.8)', // 0% 处的颜色
                                                    },
                                                    {
                                                        offset: 0.4,
                                                        color: 'rgba(253, 224, 99, 0.8)', // 0% 处的颜色
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(253, 179, 88, 0.6)', // 100% 处的颜色
                                                    },
                                                ],
                                                globalCoord: false, // 缺省为 false
                                            },
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: v2L2Chart.max,
                                    symbolPosition: 'end',
                                    itemStyle: {
                                        normal: {
                                            color: {
                                                type: 'radial',
                                                x: 0.5,
                                                y: 0.6,
                                                r: 0.5,
                                                colorStops: [{
                                                        offset: 0,
                                                        color: 'rgba(31, 194, 252, 0.8)', // 0% 处的颜色
                                                    },
                                                    {
                                                        offset: 0.4,
                                                        color: 'rgba(31, 194, 252, 0.8)', // 0% 处的颜色
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(31, 194, 252, 0.6)', // 100% 处的颜色
                                                    },
                                                ],
                                                globalCoord: false, // 缺省为 false
                                            },
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: v2L2Chart.max,
                                    symbolPosition: 'end',
                                    itemStyle: {
                                        normal: {
                                            color: {
                                                type: 'radial',
                                                x: 0.5,
                                                y: 0.6,
                                                r: 0.5,
                                                colorStops: [{
                                                        offset: 0,
                                                        color: 'rgba(115, 182, 255, 0.8)', // 0% 处的颜色
                                                    },
                                                    {
                                                        offset: 0.4,
                                                        color: 'rgba(115, 182, 255, 0.8)', // 0% 处的颜色
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(115, 182, 255, 0.6)', // 100% 处的颜色
                                                    },
                                                ],
                                                globalCoord: false, // 缺省为 false
                                            },
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: v2L2Chart.max,
                                    symbolPosition: 'end',
                                    itemStyle: {
                                        normal: {
                                            color: {
                                                type: 'radial',
                                                x: 0.5,
                                                y: 0.6,
                                                r: 0.5,
                                                colorStops: [{
                                                        offset: 0,
                                                        color: 'rgba(1, 80, 207, 0.8)', // 0% 处的颜色
                                                    },
                                                    {
                                                        offset: 0.4,
                                                        color: 'rgba(1, 80, 207, 0.8)', // 0% 处的颜色
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(1, 80, 207, 0.6)', // 100% 处的颜色
                                                    },
                                                ],
                                                globalCoord: false, // 缺省为 false
                                            },
                                        },
                                    },
                                },
                            ],
                        },
                        //底色
                        {
                            name: '底色',
                            // stack: 'a',
                            type: 'bar',
                            barWidth: 66,
                            z: 2,
                            barGap: '-100%',
                            stack: '广告',
                            data: [{
                                    name: '',
                                    value: v2L2Chart.max - v2L2Chart.data[0],
                                    symbolPosition: 'end',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgba(253, 179, 88, 0.4)',
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: v2L2Chart.max - v2L2Chart.data[1],
                                    symbolPosition: 'end',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgba(31, 194, 252, 0.4)',
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: v2L2Chart.max - v2L2Chart.data[2],
                                    symbolPosition: 'end',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgba(115, 182, 255, 0.4)',
                                        },
                                    },
                                },
                                {
                                    name: '',
                                    value: v2L2Chart.max - v2L2Chart.data[3],
                                    symbolPosition: 'end',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgba(1, 80, 207,  0.4)',
                                        },
                                    },
                                },
                            ],
                        },
                    ],
                };

                myChart.setOption(option, true);
            }
        },
        created() {
            this.created_sys();

        }
    }
</script>
唐生洗发用飘柔
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts自定义柱状图
weixin_52180195的博客
05-10 1716
const img1 = { a: ‘…/…/assets/images/group010/ruzi.png’, b: ‘…/…/assets/images/group010/ruzi1.png’, }; const img2 = { a: ‘…/…/assets/images/group010/rub.png’, b: ‘…/…/assets/images/group010/rulan1.png’, }; const img3 = { a: ‘…/…/assets/images/group010/ruc.
vue中echarts柱状图不同系列的同一背景实现、坐标轴刻度标签自定义图片实现
一个希望世界和平的前端程序猿的博客
12-20 673
echarts柱状图不同系列的同一背景实现、坐标轴刻度标签自定义图片实现
最全echarts象形柱图自定义样式（类似柱状图），物联网嵌入式开发之内存泄漏调试学习与总结
最新发布
2401_85015249的博客
05-15 2161
data: [‘滑轮’,‘电源线’,‘滑轮’,‘电源线’,‘滑轮’,‘电源线’,‘滑轮’,‘电源线’,‘滑轮’](img-QpKch06q-1715719697846)](img-PXbwIEeB-1715719697847)]symbolRepeat: ‘fixed’, //使图形元素重复。show: false //是否显示坐标轴刻度。show:false // 是否显示坐标轴。
echarts柱状图自定义样式（二）
miracle__Y的博客
02-09 1774
后补柱状图样式设置，效果： 代码呈上： <div class="columnstyle" id="deviceRepair"></div> JavaScript： var deviceRepair = echarts.init(document.getElementById('deviceRepair')); var deviceRepair1 = [10...
echart 的一个自定义柱状图的demo 状态颜色关联
06-13
echart 的一个自定义柱状图的demo，之前作为帮别人写的一个测试用小组件 。
Echarts柱状图
君兮的博客
01-24 876
创建一个图表容器，初始情况必须给这个图表一个宽高，如果这里没给，在下面获取容器的时候也可以给 <div id="myChart" :style="{height: '250px'}"></div> 获取div容器 myChart(参数) { var myChart = this.$echarts.init(document.getElementById('myChart')) 如果初始没设置图表容器的大小，可以在这个进行设置 /*var myCh
194Echarts - 自定义系列（Error Bar on Catesian）
阿甘兄
05-05 724
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
echarts自定义树状图，且每个系列柱子数不一
04-11
echarts自定义柱状图的形式，根据数据格式，横轴为多个系列项，每个系列项拥有的柱子数量不等，可自动计算柱子数量等分宽度显示。
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图
03-20
Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图，数据驱动更新charts （备份的案例） 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/PictorialBar
springboot echarts vue 柱状图
01-25
在本项目中，我们结合了SpringBoot、Vue和ECharts三个技术栈，旨在实现一个后端数据驱动的前端柱状图展示。以下是关于这些技术及其整合应用的详细知识点： 1. **SpringBoot**： SpringBoot是Spring框架的一个简化...
数据可视化 - 柱状图自定义背景图
YYDataV的博客
05-19 1206
from pyecharts import options as opts from pyecharts.charts import Bar from pyecharts.commons.utils import JsCode from pyecharts.faker import Faker c = ( Bar( init_opts=opts.InitOpts( bg_color={"type": "pattern", "image": JsCode...
在echarts中自定义直方图bar上悬浮透明窗文本内容
01-06 501
直接贴代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echa...
echarts 柱状图对个别柱条的颜色自定义。
yaomengzhi的博客
07-31 1万+
 1、示例如上图所示，对stat这条数据进行特别标识； 2、option具体配置如下，请注意看特别标识部分。 option = {     xAxis: {         type: 'category',         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']     },     yAxis: {        ...
自定义Echarts图表图例的图片
HuLuWa1997的博客
04-13 713
从Echarts官网上我们可以知道图例默认的图片样式有以下几种，分别是’circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’,那如果我们要实现图片的标记类型该怎么实现呢，给大家分享两种实现方式 第一种： <script> import imgZhiWu from "./img/jhx/1.png"; import imgDongWu from "./img/jhx/2.png"; import i
echarts柱状图自定义图例，以及末端显示自己想要得到图片
热门推荐
weixin_43964779的博客
02-26 1万+
&lt;div id="main" style="width:2000px;height:1200px"&gt;&lt;/div&gt; 先来一个简简单单的 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option = { xAxi...
柱状图背景和外面的做到统一 echarts
chengchong_cc的博客
04-04 266
三个地方都要复制过去，不然会报错。
使用echarts自定义柱状图
08-09
要自定义柱状图，您可以使用 ECharts 提供的配置选项来实现各种样式和功能的定制。下面是一个基本的示例，展示了如何使用 ECharts 创建一个简单的柱状图，并进行一些基本的自定义： ```javascript // 引入 ECharts ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值