vue常用的Echarts实例

最新推荐文章于 2024-04-08 00:39:54 发布
最新推荐文章于 2024-04-08 00:39:54 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： 笔记 文章标签： echarts vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56260119/article/details/122988292
版权

此文章来源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
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+ECharts的小示例
Uluoyu的博客
06-04 1109
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 1123
经常会用到图形统计对数据进行扁平化显示，下面文章中使用echarts进行了简单的统计图形展示。一、ECharts安装安装：从npm获取：在使用的地方引用echarts。
在Vue中使用Echarts实例图的方法实例
10-14
主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 常用的 Echarts 示例
大家好，我是 ed.
10-09 1984
vue 常用的 Echarts 示例 为啥要整理这一篇博文呢？其实最近做大屏做的恶心了，好多echarts图表，样式花里胡哨，调样式太费劲了，然后把做过的拿下来备份一下，需要的话直接粘贴稍作修改就可以了。 echarts配置项官网：https://echarts.apache.org/zh/option.html#title 多条柱形图 option = { animation: false, title: { text: '本周主煤流
vue 常用的 Echarts 示例(1)
最新发布
2401_84094868的博客
04-08 526
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可获取环形图自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
vue-echarts的使用示例
qq_37870582的博客
05-06 903
vue-echarts的使用示例 前一个项目刚好用到的vue-echarts，但不是纯vue项目，现在这个项目刚好是纯前端vue项目，总结下使用的方法，避免以后忘记，也希望对大家有帮助。 参考：技术文档 1. npm添加echarts和vue-echarts 我使用的是npm方式，如果不一样，可以百度下其他方式 npm install echarts -S // 添...
Vue+Echarts监控大屏实例九：智慧园区监控模板实例
05-21
Vue+Echarts监控大屏实例九：智慧园区监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
Vue+Echarts监控大屏实例十：智慧养老监控模板实例
05-30
Vue+Echarts监控大屏实例十：智慧养老监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
Vue+Echarts监控大屏实例四：智慧农业监控模板实例
04-11
Vue+Echarts监控大屏实例四：智慧农业监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
Vue+Echarts监控大屏实例八：智慧社区监控模板实例
05-09
Vue+Echarts监控大屏实例八：智慧社区监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
Vue+Echarts实例
lkrdmm的博客
12-23 876
先看下最终的效果图吧。 很明显哈，是在一个父组件上，有两个子组件页面，每个子组件展示一个Echarts图。 父组件源码我就不展示了，主要是把子组件导入并且加入到components属性中，然后在对应的位置去用就可以了。 由于我把请求都写在了子组件中去调用，所以就不用去用props传递数据了（实际开发最好减少请求次数，从而起到优化的作用）。 这个是饼图子组件的代码。 <template> <div> <div id="myCharts"></div&gt
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的实例代码（3种图）
12-07
前言 公司的项目中需要对数据做可视化处理，高级点的D3.js目前还没接触到，因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts，但是使用现成的就意味着必须使用它定制好的数据结构，我也没办法对他进行一些修改。我个人也偏向于原生JS编程，因此没有采用，而是自己在vue中实现了对数据的可视化处理，先来看看效果图 以下数据已做脱敏处理 这是目前用到的三种图。 可以看到，我在图表的外部添加了标题及说明，以及右侧的选择框组件，视图可以根据选择的不同，图表进行动态切换（echarts也是数据驱动），这就是个人定制化的好处 总体数据流向 所有的数据都是动态
vue中使用echarts制作圆环图的实例代码
12-29
vue使用echarts制作圆环图，代码如下所示： [removed] export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts: '', totalIncome:'', opinionData: [ {value: Math.abs(this.chartT.imp
使用vueecharts实现大数据展示网站
08-10
使用vue echarts实现大数据展示网站
ECharts——绘制柱状图
娓娓道来
08-28 1153
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></sc...
实战vue项目中的 echarts实例封装。动态获取数据
lzfengquan的博客
11-30 1388
项目中是用echarts 一定要下载它，命令 ： npm install echarts -S 注意如果版本太高有问题，可以下载低版本的 4.8.0 然后需要全局引入，在main.js中 // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts OK了，我们可以使用它了。 我们在view文件夹李专门去写这样的效果，或者在component文件夹李去写封装的组件echarts. 首先在App.vue 文件中编辑代
echart vue例子
热门推荐
jack_rose_me的博客
07-14 1万+
文档： https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 1、条形 <template> <div> <!-- 包其他内容需要有个外div --> <div :class="className" :style="{height:height,width:width}" id="sortEChart"/>
Vue+echarts案例demo
qq_42166078的博客
09-18 2854
最近在做一个vue配合图标的项目，期间看了很多案例，也修改了很多配置，期间把觉得几个比较好的图形分享给大家，这个网站比较多的案例，也可以参考Echarts官网 1.安装echarts npm install echarts --s 2.在main.js中引入echarts，使echarts变成全局变量，通过this.$echarts引用 import echarts from 'echarts'...
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、付费专栏及课程。

余额充值