vue常用的Echarts实例

最新推荐文章于 2024-09-05 09:52:45 发布
最新推荐文章于 2024-09-05 09:52:45 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： 笔记 文章标签： echarts vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56260119/article/details/122988292
版权
本文详细介绍了使用Echarts创建多条柱状图、曲线图、柱形图配折线图、堆积柱形图、饼图、进度环形图、雷达图和散点图的示例，涵盖了数据可视化中的多种常见图表类型，以及各种图表的样式配置，如颜色渐变、标签显示、线条样式等，帮助开发者更好地理解和应用Echarts进行数据展示。
摘要由CSDN通过智能技术生成

此文章来源vue 常用的 Echarts 示例_秦浩铖-CSDN博客

echarts配置项官网：Documentation - Apache ECharts

多条柱形图 

	option = {
          animation: false,
          title: {
            text: '本周主煤流系统启动平均时长',
            textAlign: 'left',
            x: 'center',
            y: 'top',
            textStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 14
            }
          },
          color: ['#0d81f7', '#0fb42c'],
          tooltip: {},
          legend: {
            show: true,
            top: 18,
            right: 0,
            data: ["主煤流系统手动启动时长", "主煤流智能启动时长"],
            textStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 10
            },
            itemWidth: 10,
            itemHeight: 10
          },
          xAxis: {
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#0092D5'
              }
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)'
            },
            data: ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06'],
          },
          yAxis: {
            name: "(分钟)",
            nameTextStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              align: 'right'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#0092D5',
                opacity: 0.3
              }
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)'
            },
          },
          grid: {
            top: '35%',
            bottom: '17%',
            left: '7%',
            right: '2%'
          },
          series: [{
            name: "主煤流系统手动启动时长",
            barWidth: 15,
            type: 'bar',
            data: [1,2,3,4,5,6],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'insideLeft', //在上方显示
                  offset: [-8, 0],
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#0069F5" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#35C3FF" // 100% 处的颜色
                }], false)
              }
            },
          }, {
            name: "主煤流系统智能启动时长",
            barWidth: 15,
            type: 'bar',
            data: [2,3,4,5,6,7],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'insideRight', //在上方显示
                  offset: [8, 0],
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#03AC32" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#69EF00" // 100% 处的颜色
                }], false)
              }
            },
          }]
        };

多条曲线图

在这里插入图片描述

	option = {
          color: ['#1890FF', '#FF7D00'],
          tooltip: {},
          legend: {
            show: true,
            top: 15,
            right: 0,
            align: 'left',
            x: 'center',
            y: 'top',
            icon: 'rect',
            itemHeight: 5,
            itemWidth: 15,
            data: ["智能配煤","非智能配煤"],
            textStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12
            },
          },
          xAxis: {
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#0092D5'
              }
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)'
            },
            data: ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06']
          },
          yAxis: {
            name: "(万元)",
            nameTextStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              align: 'right'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#0092D5',
                opacity: 0.3
              }
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)'
            },
          },
          grid: {
            top: '25%',
            bottom: '10%',
            left: '10%',
            right: '2%'
          },
          series: [{
            name: "智能配煤",
            barWidth: 15,
            type: 'line',
            smooth: true,
            data: [1,2,3,4,5,6],
          }, {
            name: "非智能配煤",
            barWidth: 15,
            type: 'line',
            smooth: true,
            data: [3,4,5,6,7,8],
          }]
        };

柱形图配折线图

在这里插入图片描述

 

	option = {
          title: {
            text: '近一周全矿井产量',
            textAlign: 'left',
            x: 'center',
            y: 'top',
            textStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 14
            }
          },
          color: ['#0d81f7', '#0fb42c', '#e97507'],
          tooltip: {},
          legend: {
            show: true,
            top: 3,
            right: 0,
            data: ["综采1","综采2", "总计"],
            textStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12
          },
          xAxis: {
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#0092D5'
              }
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)'
            },
            data: ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06']
          },
          yAxis: {
            name: "(吨)",
            nameTextStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              align: 'right'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#0092D5',
                opacity: 0.3
              }
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)'
            },
          },
          grid: {
            top: '20%',
            bottom: '10%',
            left: '10%',
            right: '2%'
          },
          series: [{
            name: "综采1",
            barWidth: 15,
            type: 'bar',
            data: [1,2,3,4,5,6],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'insideLeft', //在上方显示
                  offset: [-8, 0],
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#0069F5" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#35C3FF" // 100% 处的颜色
                }], false)
              }
            },
          }, {
            name: "综采2",
            barWidth: 15,
            type: 'bar',
            data: [3,4,5,6,7,8],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'insideRight', //在上方显示
                  offset: [8, 0],
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#03AC32" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#69EF00" // 100% 处的颜色
                }], false)
              }
            },
          }, {
            name: "总计",
            barWidth: 15,
            type: 'line',
            color: '#f67a03',
            data: [8,9,10,11,12,13],
          }]
        };

柱形图堆积

在这里插入图片描述

 

	option = {
          color: ['#acff02', '#fac800', '#ff7d00', '#0fb42c'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
              type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {
            show: true,
            top: 15,
            right: 0,
            x: 'center',
            y: 'top',
            data: ["生产队1","生产队2","生产队3", "总计"],
            textStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12
          },
          xAxis: {
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#0092D5'
              }
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)'
            },
            data:  ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06']
          },
          yAxis: {
            name: "(吨)",
            nameTextStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              align: 'right'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#0092D5',
                opacity: 0.3
              }
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)'
            },
          },
          grid: {
            top: '25%',
            bottom: '10%',
            left: '12%',
            right: '2%'
          },
          series: [{
            name:  "生产队1",
            barWidth: 15,
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: [1,2,3,4,5,6],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'insideRight', //在上方显示
                  offset: [-8, 0],
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
              }
            },
          }, 
          
          {
            name: "生产队2",
            barWidth: 15,
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data:[2,3,4,5,6,7],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'insideRight', //在上方显示
                  offset: [-8, 0],
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 10,
                  }
                },
              }
            },
          }, 
          
          {
            name: "生产队3",
            barWidth: 15,
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data:[5,6,7,8,9,10],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'insideRight', //在上方显示
                  offset: [-8, 0],
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
              }
            },
          }, {
            name: '总计',
            barWidth: 15,
            type: 'bar',
            data: [21,22,23,34,25,25],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'insideLeft', //在上方显示
                  offset: [8, 0],
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#0069F5" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#35C3FF" // 100% 处的颜色
                }], false)
              }
            },
          }]
        };

饼图

在这里插入图片描述

 

option = {
          title: {
            text: '各生产队工效',
            textAlign: 'left',
            x: 'center',
            y: 'top',
            top: '7%',
            textStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12
            }
          },
          tooltip: {},
          legend: {
             orient: 'vertical',
             top: '50%',
             left: '15%',
             textStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12
          },
          grid: {
            top: '20%',
            bottom: '10%',
            left: '10%',
            right: '10%'
          },
          series: [{
            name: '功效',
            type: 'pie',
            radius: [15, 70],
            center: ['68%', '60%'],
            // roseType: 'area',
            itemStyle: {
              borderRadius: 2
            },
            label: {
              position: 'inside',
              formatter: '{c}吨/人天',
              fontWeight: 600,
              color: '#fff'
            },
            data: [{
            	value:12,
            	name: "生产队1"
            },{
            	value:34,
            	name: "生产队2"
            },{
            	value:23,
            	name: "生产队3"
            }]
          }]
        };

进度环形图

在这里插入图片描述

 

	option = {
          color: ['#414f5b', '#1890ff'],
          series: [
            {
              name: '任务进度',
              type: 'pie',
              radius: ['75%', '100%'],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{
                value: 25,
                label: {
                  normal: {
                    show: false,
                  }
                }
              }, {   // 数据值
                value: 75,
                // 数据项名称
                name: "采煤机开机率",
                //该数据项是否被选中
                selected: false,
                // 单个扇区的标签配置
                label: {
                  // 是显示标签
                  show: true,
                  position: 'center',
                  fontSize: 14,
                  color: '#fff',
                  lineHeight: 15,
                  formatter: '\n{b}\n\n ' + `{a| {c} }` + '\n\n%',
                  rich: {
                    a: {
                      color: '#1890ff',
                      fontSize: 30,
                      fontWeight: 600,
                    }
                  }
                },
              }]
            }
          ]
        };

雷达图

在这里插入图片描述

	option = {
          color: ['#fa0145', '#02f8f9'],
          tooltip: {
            show: true
          },

          radar: {
            nameGap: 7,
            axisLine: {
              lineStyle: {
                color: '#0781c0',
                type: 'dashed'
              }
            },
            name: {
              color: '#fff'
            },
            splitLine: {
              lineStyle: {
                color: '#0781c0',
                type: 'dashed'
              }
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: 'rgba(255,0,0,0)', // 图表背景的颜色
              },
            },
            indicator: ["人员","设备","环境","管理"]
          },
          series: [{
            name: '',
            type: 'radar',
            data: [
              {
                value: //[4200, 3000, 20000, 35000],
                name: '',
                areaStyle: {
                  color: '#fa0145',
                  opacity: 0.1,
                },
                itemStyle: { // 折线拐点标志的样式。
                  normal: { // 普通状态时的样式
                    lineStyle: {
                      width: 1
                    },
                    opacity: 0.2
                  },
                  emphasis: { // 高亮时的样式
                    lineStyle: {
                      width: 5
                    },
                    opacity: 1
                  }
                },
              },
              {
                value: [6200, 2000, 30000, 25000],
                name: '风险评估',
                areaStyle: {
                  color: '#02f8f9',
                  opacity: 0.1,
                },
                itemStyle: { // 折线拐点标志的样式。
                  normal: { // 普通状态时的样式
                    lineStyle: {
                      width: 1
                    },
                    opacity: 0.2
                  },
                  emphasis: { // 高亮时的样式
                    lineStyle: {
                      width: 5
                    },
                    opacity: 1
                  }
                },
              }
            ]
          }]
        };

 标线、柱形图重叠

在这里插入图片描述

option = {
  title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series:[
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230],
      barGap: '-50%',
      z: 3,
      markLine: {
        data: [{
        name: 'X 轴值为 100 的竖直线',
        xAxis: 123456
        }],
        silent: true,
        symbolSize: 'minorSplitLine',
      }
    },
    {
      name: '2012',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
};

 仪表盘

 

 option = {
        backgroundColor: "#000",
            tooltip: {
                formatter: "{b}{c}"
            },
            series: [{
                tooltip: {
                    show: false
                },
                name: 'wrap',
                type: 'pie',
                hoverAnimation: false,
                legendHoverLink: false,
                center: ['50%','60%'],
                radius: ['0%', '7%'],
                z: 5,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: 100,
                    itemStyle: {
                        normal: {
                            color: "#072B79"
                        },
                        emphasis: {
                            color: "#072B79"
                        }
                    }
                }]
            }, {
                tooltip: {
                    show: false
                },
                name: 'wrap',
                type: 'pie',
                hoverAnimation: false,
                legendHoverLink: false,
                center: ['50%','60%'],
                radius: ['6%', '8%'],
                z: 5,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: 100,
                    itemStyle: {
                        normal: {
                            color: "#24D8E7"
                        },
                        emphasis: {
                            color: "#24D8E7"
                        }
                    }
                }]
            }, {
                tooltip: {
                    show: false
                },
                name: '刻度',
                type: 'gauge',
                radius: '83%',
                z: 1,
                min: 0,
                max: 1,
                center: ['50%','60%'],
                splitNumber: 5, //刻度数量
                startAngle: 180,
                endAngle: 0,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 5,
                        color: [
                            [0.12, '#E71A6D'],
                            [0.35, '#F88168'],
                            [0.63, '#FBF76B'],
                            [0.8, '#7AD4DF'],
                            [1, '#70C27E'],
                        ]
                    }
                }, //仪表盘轴线
                axisLabel: {
                    show: false
                }, //刻度标签。
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: 'auto',
                        width: 0
                    },
                    length: -15
                }, //刻度样式
                splitLine: {
                    show: true,
                    length: 0,
                    lineStyle: {
                        color: 'auto',
                        width: 2
                    }
                }, //分隔线样式
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                }
            }, {
                name: '本期',
                type: 'gauge',
                radius: '80%',
                min: 0,
                max: 1,
                center: ['50%','60%'],
                data: [{
                    value: 0.89,
                    name: '本期'
                }],
                splitNumber: 12, //刻度数量
                startAngle: 180,
                endAngle: 0,
                z: 5,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 0,
                        color: [
                            [0.12, '#E71A6D'],
                            [0.35, '#F88168'],
                            [0.63, '#FBF76B'],
                            [0.8, '#7AD4DF'],
                            [1, '#70C27E'],
                        ]
                    }
                }, //仪表盘轴线
                axisLabel: {
                    show: true,
                    color: '#fff',
                    fontSize:20,
                    distance: -70,
                    formatter:function(params){
                        var value = params.toFixed(2)
                        
                        if(value == 0.00){
                            return '危'
                        }else if(value == 0.25){
                            return '差'
                        }else if(value == 0.50){
                            return '中'
                        }else if(value == 0.75){
                            return '良'
                        }else if(value == 1.00){
                            return '优'
                        }else{
                            return ''
                        }
                    }
                }, //刻度标签。
                axisTick: {
                    splitNumber: 10,
                    show: true,
                    lineStyle: {
                        color: 'auto',
                        width: 2
                    },
                    length: 20,
                }, //刻度样式
                splitLine: {
                    show: true,
                    length: 25,
                    lineStyle: {
                        color: 'auto',
                        width: 5
                    }
                }, //分隔线样式

                itemStyle: {
                    normal: {
                        color: "#24D8E7" //指针颜色
                    }
                },
                pointer: {
                    width: 10,
                    length: '80%'
                },
                detail: {
                    formatter: function(params){
                        return (params*100).toFixed(0) + '%'
                    },
                    fontSize: 35,
                    color: "#fff",
                    offsetCenter: ['0%', '-35%']
                },
                title: {
                    offsetCenter: ['0', '-60%'], 
                    fontSize: 25,
                    color: "#fff",
                    show: true
                },
            }]
      };

散点图

 

 option = {
        legend: {
          data: ["图例一", "图例二"],
          left: "3%",
          top: "1%",
          icon: "circle",
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: `rgba(44, 53, 66, 0.65)`,
            fontSize: 12,
            fontFamily: "Alibaba PuHuiTi",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              color: `rgba(65, 97, 128, 0.45)`,
            },
          },
          splitLine: {
            lineStyle: {
              color: `rgba(65, 97, 128, 0.151934)`,
            },
          },
          axisLabel: {
            color: "rgba(44, 53, 66, 0.6)",
          },
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: `rgba(65, 97, 128, 0.151934)`,
            },
          },
          axisLine: {
            lineStyle: {
              color: `rgba(65, 97, 128, 0.45)`,
            },
          },
          axisLabel: {
            color: "rgba(44, 53, 66, 0.6)",
          },
        },
        series: [
          {
            name: "图例一",
            symbolSize: 10,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68],
            ],
            type: "scatter",
            itemStyle: {
              color: "#5B8FF9",
            },
          },
          {
            name: "图例二",
            symbolSize: 10,
            data: [
              [9.0, 8.04],
              [7.07, 6.95],
              [13.0, 8.58],
              [7.05, 8.81],
              [9.0, 8.33],
              [12.0, 7.66],
              [11.4, 6.81],
              [7.0, 6.33],
              [9.0, 7.96],
              [7.5, 6.82],
              [8.15, 5.2],
              [9.5, 10.2],
              [4.03, 5.23],
              [6.2, 7.83],
              [3.02, 4.47],
              [2.05, 4.33],
              [3.05, 1.96],
              [7.03, 6.24],
              [9.0, 8.26],
              [10.0, 4.84],
              [5.08, 6.82],
              [3.02, 2.68],
            ],
            type: "scatter",
            itemStyle: {
              color: "#6ADFAF",
            },
          },
        ],
      };

月亮c
关注
专栏目录
Vue+ECharts的小示例
Uluoyu的博客
06-04 1173
Vue+ECharts做数据可视化 1. Vue Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 我使用的Vue版本是3.11.0。 2.ECharts https://echarts.apache.org/examples/zh/index.html ECharts的所有示
vue中使用echarts的例子
weixin_42464106的博客
10-27 1299
经常会用到图形统计对数据进行扁平化显示，下面文章中使用echarts进行了简单的统计图形展示。一、ECharts安装安装：从npm获取：在使用的地方引用echarts。
在Vue中使用Echarts实例图的方法实例
10-14
主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 常用的 Echarts 示例
10-09 2342
vue 常用的 Echarts 示例 为啥要整理这一篇博文呢？其实最近做大屏做的恶心了，好多echarts图表，样式花里胡哨，调样式太费劲了，然后把做过的拿下来备份一下，需要的话直接粘贴稍作修改就可以了。 echarts配置项官网：https://echarts.apache.org/zh/option.html#title 多条柱形图 option = { animation: false, title: { text: '本周主煤流
Vue 中使用 ECharts，附大量图表示例
最新发布
09-05 1316
通过以上步骤，我们已经学会了如何在Vue中使用ECharts，并实现数据的动态更新。除此之外，ECharts还可以用于制作多种类型的图表，如折线图、饼图、雷达图等。
jQuery概述，架构师必备技能
2401_84094725的博客
04-04 466
去jquery官网下载jquery代码，在项目中新建jquery.min.js文件，将在jquery官网得道的jquery代码复制到jquery.min.js文件中。代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！2.6、JQuery对象和DOM对象的转换。2.5、JQuery对象和DOM对象。2.4、jQuery的顶级对象。
Vue+Echarts监控大屏实例九：智慧园区监控模板实例
05-21
Vue+Echarts监控大屏实例九：智慧园区监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
Vue+Echarts监控大屏实例四：智慧农业监控模板实例
04-11
Vue+Echarts监控大屏实例四：智慧农业监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
Vue+Echarts监控大屏实例十：智慧养老监控模板实例
05-30
Vue+Echarts监控大屏实例十：智慧养老监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
Vue+Echarts监控大屏实例八：智慧社区监控模板实例
05-09
Vue+Echarts监控大屏实例八：智慧社区监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
vue-echart柱状图 案例代码分享
01-07
引言：因笔者在项目中只用到了柱状图，此处仅分享柱状图的案例代码，使用的是vue-echarts，涉及到数据请求，柱状图渲染，简化的鼠标经过显示数据内容，以及鼠标点击柱形图某个柱子的事件代码。 正文： 1、安装vue-echarts： npm install echarts vue-echarts 2、使用方法（笔者用在src/views/chart.vue文件中）： 1）按需引入vue-echarts： import Vue from vue; import ECharts from vue-echarts; // 引入柱状图 import echarts/lib/chart/b
vue-echarts的使用示例
qq_37870582的博客
05-06 1012
vue-echarts的使用示例 前一个项目刚好用到的vue-echarts，但不是纯vue项目，现在这个项目刚好是纯前端vue项目，总结下使用的方法，避免以后忘记，也希望对大家有帮助。 参考：技术文档 1. npm添加echarts和vue-echarts 我使用的是npm方式，如果不一样，可以百度下其他方式 npm install echarts -S // 添...
Vue+Echarts实例
lkrdmm的博客
12-23 912
先看下最终的效果图吧。 很明显哈，是在一个父组件上，有两个子组件页面，每个子组件展示一个Echarts图。 父组件源码我就不展示了，主要是把子组件导入并且加入到components属性中，然后在对应的位置去用就可以了。 由于我把请求都写在了子组件中去调用，所以就不用去用props传递数据了（实际开发最好减少请求次数，从而起到优化的作用）。 这个是饼图子组件的代码。 <template> <div> <div id="myCharts"></div&gt
vue+echarts 几个案例
努力！加油！！
01-15 791
【代码】vue+echarts 几个案例。
ECharts——绘制柱状图
娓娓道来
08-28 1240
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></sc...
吹爆这份HTTP顶级教程，从入门到核心实战，技术总监都拍手叫好
2401_84092169的博客
04-05 388
认识 SSL/TLSHTTPS 的内核是 HTTP给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。面试题，有需要的朋友可以戳这里免费领取，先到先得哦。**[外链图片转存中…(img-qPPvEnxY-1712321684743)][外链图片转存中…(img-aqRxn1zL-1712321684743)]
vue清除echarts实例
06-06
在Vue中清除ECharts实例，可以通过以下步骤实现： 1. 在Vue组件的生命周期钩子函数中，创建ECharts实例并渲染图表。 2. 在组件销毁前，调用ECharts实例的`dispose`方法，清除实例并释放内存。 以下是示例代码： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值