精华内容
下载资源
问答
  • vue封装echarts柱状图

    2021-07-07 17:42:16
    <template> <div> <div id="myChart" :style="{ width: width, height: height }"></div> </div> </template>...import * as echarts from "echarts"; export
    <template>
      <div>
        <div :id="myChart" :style="{ width: width, height: height }"></div>
      </div>
    </template>
    <script>
    // import { baseurl } from "@/api/common/request";
    import * as echarts from "echarts";
    export default {
      props: {
        widthHeight: {type: Object},
      },
      data() {
        return {
        myChart:"myChart"+new Date().valueOf()
          data: [
            { name: "Mon", value: 200, color: "#a90000" },
            { name: "Tue", value: 250, color: "#ccc" },
            { name: "Wed", value: 100, color: "#eee" },
            { name: "Thu", value: 180, color: "#000" },
            { name: "Fri", value: 220, color: "#5C7BD9" },
            { name: "Sat", value: 280, color: "#B5D5FF" },
            { name: "Sun", value: 130, color: "#a90000" },
          ],
          name: [],
          valueColor: [],
          width: "300px",
          height: "300px",
          title: null,
        };
      },
      mounted() {
        this.change();
        this.width=this.widthHeight.ewidth
        this.height=this.widthHeight.eheight
      },
      methods: {
        change() {
          for (var i = 0; i < this.data.length; i++) {
            this.name.push(this.data[i].name);
            this.valueColor.push({
              value: this.data[i].value,
              itemStyle: {color:this.data[i].color},
            });
            if (this.valueColor.length == this.data.length) {
                // 当数据分离完再调用drawLine方法
              this.drawLine(); 
            }
          }
        },
        drawLine() {
          let newPromise = new Promise((resolve) => {
            resolve();
          });
          //然后异步执行echarts的初始化函数
          newPromise.then(() => {
            //	此dom为echarts图标展示dom
            let myChart = echarts.init(document.getElementById(this.myChart));
            myChart.setOption({
              xAxis: {
                type: "category",
                data: this.name,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: this.valueColor,
                  type: "bar",
                },
              ],
            });
          });
        },
      },
    };
    </script>
    

    父组件

    //使用
    <barFour :widthHeight="widthHeight"></barFour>
    //引入
    import barFourfrom "@/components/common/eaharts/bar/barFour";
    //注册
    components:{barFour}
    widthHeight: {
        ewidth: "500px",
        eheight: "250px",
      },
    
    展开全文
  • // main.js引入echarts import echarts from ‘echarts’ //有时语法报错 或使用 import * as echarts from ‘echarts’ Vue.prototype.$echarts = echarts 3.创建组件 <template> <div id="echarts

    1.安装echarts依赖
    npm install echarts -S 或cnpm install echarts -S

    2.全局引用
    // main.js引入echarts
    import echarts from ‘echarts’ //有时语法报错 或使用 import * as echarts from ‘echarts’
    Vue.prototype.$echarts = echarts

    3.创建组件

    <template>
      <div id="echarts">
        <div >
          <div>
            <div id="myChart" :style="{ width: '600px', height: '300px' }"></div>
          </div>
        </div>
      </div>
    </template>
    <script>
    import * as echarts from 'echarts'
    import { getarrival } from '@/api/product'    //调用后台接口
    export default {
      name: 'Echarts',
      data() {
        return {
          dataList: [],
         obj:{
         id:1
            }
                }
        },
      mounted() {
        this.drawLine()
      },
      methods: {
        drawLine() {
          getarrival(this.obj).then((res) => {
            this.dataList = res.data.data.arrivel_later_result.bar     //接口返回数据赋值this.dataList
            // 基于准备好的dom,初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
              title: {
                text: this.dataList.title.text,
                subtext: this.dataList.title.subtext,
                left: this.dataList.title.left
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              xAxis: {
                type: 'category',
                data: this.dataList.xAxis.data
              },
              yAxis: {
                type: 'value'
                // boundaryGap: [0, 0.01]
              },
              series: [
                {
                  name: '迟到占比',
                  type: 'bar',
                  barWidth: 30, //柱图宽度
                  data: this.dataList.series[0].data
                }
              ]
            })
          })
        },
     
      }
    }
    </script>
    

    4.效果实现
    image.png

    展开全文
  • ">section> div> template> js部分: <script> import echarts from 'echarts' // 旧版引入 // import * as echarts from 'echarts' // 新版5.0以上引入 export default { data() { return { // 不同的数据格式 bar...

    案例一:堆叠柱状图

    html写法:
    <template>
      <div>
        <section ref="barChart" style="width: 50%; height: 500px;"></section>
        <section ref="echartsRef" style="width: 50%; height: 500px;"></section>
      </div>
    </template>
    

    在这里插入图片描述

    js部分:
    <script>
    import echarts from 'echarts' // 旧版引入
    // import * as echarts from 'echarts' // 新版5.0以上引入
    export default {
      data() {
        return {
        // 不同的数据格式
          barChartData: {
            date: ['2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16'],
            data: [[0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [6, 4, 7, 7, 8], [1, 4, 1, 1, 2], [0, 0, 0, 0, 0]],
            legend: ['服务态度', '运输及时性', '运输清洁密封情况', '车容状况', '收费情况']
          },
          echartsData: {
            series: [{
              compare: ['503.36', '-349.87', '-867.99', '1001.43', '341.07', '202.36', '-401.90', '251.79', '-393.55', '473.63', '-14.26', '-54.32', '641.95', '-55.37', '-168.05', '30.26'],
              data: ['2188.61', '1838.74', '970.75', '1972.18', '2313.25', '2515.61', '2113.71', '2365.51', '1971.95', '2445.59', '2431.32', '2377.01', '3018.95', '2963.59', '2795.53', '2825.80'],
              name: '厨余垃圾',
              unit: 'kg'
            },
            {
              compare: ['3.05', '1.25', '12.16', '-2.76', '2.54', '14.46', '-20.30', '-10.41', 0, 0, 0, 0, 0, 0, 0, 0],
              data: ['3.05', '4.30', '16.46', '13.71', '16.25', '30.70', '10.41', 0, 0, 0, 0, 0, 0, 0, 0, 0],
              name: '有害垃圾',
              unit: 'kg'
            },
            {
              compare: ['867.37', '-430.15', '-1473.19', '1836.36', '516.63', '291.83', '-590.19', '441.96', '-886.80', '1047.65', '-40.95', '-51.91', '947.67', '203.41', '-654.44', '-265.55'],
              data: ['3576.51', '3146.36', '1673.17', '3509.53', '4026.16', '4317.99', '3727.80', '4169.77', '3282.96', '4330.62', '4289.66', '4237.75', '5185.42', '5388.83', '4734.39', '4468.84'],
              name: '其他垃圾',
              unit: 'kg'
            },
            {
              compare: [0, 0, 0, 0, 0, 0, 0, '2.30', '-2.30', '1.00', '-1.00', 0, 0, 0, 0, 0],
              data: [0, 0, 0, 0, 0, 0, 0, '2.30', 0, '1.00', 0, 0, 0, 0, 0, 0
              ],
              name: '可回收物',
              unit: 'kg'
            }],
            xAxis: ['2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16']
          }
        }
      },
      mounted() {
        this.drawBarChart(this.barChartData)
        this.drawEcharts(this.echartsData)
      },
      methods: {
        setColorArr() {
          const arr = ['#1fca3f', '#f90f1b', '#989898', '#0c23f5', '#c23531']
          return arr
        },
        drawBarChart(item) {
          let seriesList = []
          let legendData = []
          let xAxisDate = []
          // x轴数据
          item.date.map(e => {
            xAxisDate.push(e)
            return xAxisDate
          })
          // 柱状图数据
          let newArr = []
          item.data.forEach(item => {
              item.forEach((d, i) => {
                console.log(d)
                console.log(newArr[i])
                  newArr[i] = newArr[i] || []
                  newArr[i].push(d)
            })
          })
          // 图例数据
          item.legend.map((e, index) => {
            legendData.push(e)
    
            let seriesObj = {
              name: e,
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  position: 'insideRight'
                }
              },
              data: newArr[index]
            }
            seriesList.push(seriesObj)
          })
          let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // 坐标轴指示器,坐标轴触发有效
                type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
              },
              formatter: par => {
                let mergeHtml = ''
                par.map(params => {
                  mergeHtml +=
                    params.marker +
                    params.seriesName + ':' + parseInt(params.data * 100) / 100 + `(个)` + '<br>'
                })
                return mergeHtml
              }
            },
            legend: {
              data: legendData
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            yAxis: {
              type: 'value',
              name: '单位:个',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#999'
                }
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: '#999'
                }
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#000'
                }
              }
            },
            xAxis: {
              type: 'category',
              data: xAxisDate,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#999'
                }
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: '#999'
                }
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#000'
                }
              }
            },
            color: this.setColorArr(),
            series: seriesList
          }
          let barChart = echarts.init(this.$refs.barChart)
          barChart.setOption(option, true)
          window.addEventListener('resize', function() {
            barChart.resize()
          })
        },
        drawEcharts(item) {
          let groupName = []
          let seriesList = []
          item.series.map(e => {
            groupName.push(e.name)
            let seriesObj = {
              name: e.name,
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  position: 'insideRight'
                }
              },
              data: e.data
            }
            seriesList.push(seriesObj)
            console.log(seriesList)
          })
          let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // 坐标轴指示器,坐标轴触发有效
                type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
              },
              formatter: par => {
                let mergeHtml = ''
                par.map((parItem, index) => {
                  mergeHtml +=
                    parItem.marker +
                    parItem.seriesName +
                    ':' +
                    parseInt(parItem.data * 100) / 100 +
                    `(${item.series[index].unit})` +
                    '<br>'
                })
                return mergeHtml
              }
            },
            legend: {
              data: groupName
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            yAxis: {
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#999'
                }
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: '#999'
                }
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#000'
                }
              }
            },
            xAxis: {
              type: 'category',
              data: item.xAxis,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#999'
                }
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: '#999'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#000'
                }
              }
            },
            color: this.setColorArr(),
            series: seriesList
          }
          let echartsRef = echarts.init(this.$refs.echartsRef)
          echartsRef.setOption(option, true)
          window.addEventListener('resize', function() {
            echartsRef.resize()
          })
        }
      }
    }
    </script>
    
    

    在这里插入图片描述

    案例二:多组数据,实现点击组内某一根柱子

    在这里插入图片描述
    在这里插入图片描述

    js部分

    drawCan () {
    		let dateArr = [] // x轴日期
            let finishedPercentageArr = [] // 完成率
            let finishCount = [] // 完成户数
            let unFinishCount = [] // 未完成户数
            let uncooperativeCount = [] // 不配合
            data.forEach(item => {
              dateArr.push(item.date)
              finishedPercentageArr.push(item.finished_percentage.replace('%', ''))
              finishCount.push(item.finished.count)
              unFinishCount.push(item.unfinished.count)
              uncooperativeCount.push(item.uncooperative.count)
            })
    
            // y轴刻度自适应
            let yLeft = finishCount.concat(unFinishCount).concat(uncooperativeCount)
            let yLinBarMaxLeft = Number(Math.max.apply(null, yLeft) * 1.5).toFixed(0)
            let yLinBarMaxRight = Number(Math.max.apply(null, finishedPercentageArr) * 1.5).toFixed(0)
            options = {
              color: ['#0f0', '#ff0', '#f00', '#00f'],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: '',
                  crossStyle: {
                    color: '#999'
                  }
                },
                formatter: (params) => {
                  let html = ''
                  params.map((item) => {
                    let seriesName = item.seriesName
                    let value = item.value
                    // let unit = item.seriesName.indexOf('率') === -1 ? '' : '%' // 单位
                    html += item.name + '</br>' + item.marker + seriesName + ':' + value + '%' + '<br/>'
                  })
                  return html
                }
              },
              legend: {
                data: ['完成户数', '未完成户数', '不配合', '完成率'],
                right: 100
                // formatter: params => {
                //   console.log('legend', params)
                // }
              },
              xAxis: [
                {
                  type: 'category',
                  data: dateArr,
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '街道完成户数',
                  min: 0,
                  max: yLinBarMaxLeft,
                  axisLabel: {
                    formatter: '{value}户'
                  }
                },
                {
                  show: false,
                  type: 'value',
                  name: '街道完成率',
                  min: 0,
                  max: yLinBarMaxRight,
                  axisLabel: {
                    formatter: '{value} %'
                  }
                }
              ],
              series: [
                {
                  name: '完成户数',
                  type: 'bar',
                  data: finishCount,
                  emphasis: {
                    focus: 'series'
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: params => {
                      let tipHtml = ''
                      let obj = data[params.dataIndex]
                      tipHtml = '<div>完成户数:' + obj.finished.count + '</div><div>常住户:' + obj.finished.long_term + '<div>租户:' + obj.finished.tenant + '</div>'
                      return tipHtml
                    }
                  }
                },
                {
                  name: '未完成户数',
                  type: 'bar',
                  data: unFinishCount,
                  emphasis: {
                    focus: 'series'
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: params => {
                      let tipHtml = ''
                      let obj = data[params.dataIndex]
                      tipHtml = '<div>未完成户数:' + obj.unfinished.count + '</div><div>常住户:' + obj.unfinished.long_term + '<div>租户:' + obj.unfinished.tenant + '</div>'
                      return tipHtml
                    }
                  }
                },
                {
                  name: '不配合',
                  type: 'bar',
                  data: uncooperativeCount,
                  emphasis: {
                    focus: 'series'
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: params => {
                      let tipHtml = ''
                      let obj = data[params.dataIndex]
                      tipHtml = '<div>未完成户数:' + obj.uncooperative.count + '</div><div>常住户:' + obj.uncooperative.long_term + '<div>租户:' + obj.uncooperative.tenant + '</div>'
                      return tipHtml
                    }
                  }
                },
                {
                  name: '完成率',
                  type: 'line',
                  yAxisIndex: 1,
                  data: finishedPercentageArr
                  // tooltip: {
                  //   trigger: 'item',
                  //   formatter: params => {
                  //     let tipHtml = ''
                  //     let obj = data[params.dataIndex]
                  //     tipHtml = '<div>完成率:' + obj.finished_percentage + '</div>'
                  //     return tipHtml
                  //   }
                  // }
                }
              ]
            }
            let echartsDom = echarts.init(画布dom)
          	echartsDom.clear() // 清空画布
          	echartsDom.setOption(options)
    }
    
    展开全文
  • vue echarts柱状图封装

    2020-05-23 16:45:06
    echarts 柱状图vue封装 <template> <div class="bar" id="bar" /> </template> <script> // 自行引入echarts import echarts from 'echarts' export default { name: 'Bar', // 接收从...

    效果

    在这里插入图片描述

    echarts 柱状图vue封装

    <template>
    	<div class="bar" id="bar" />
    </template>
    
    <script>
    // 自行引入echarts
    import echarts from 'echarts'
    
    export default {
      name: 'Bar',
      // 接收从父组件传回的值
      props: ['getData'],
      data () {
        return {}
      },
      // 实时监听父组件传过来的值,进而执行drawBar方法,重绘柱状图
      watch: {
        getData: {
          handler (value) {
            this.drawBar(value)
          },
          deep: true
        }
      },
      mounted () {
        this.drawBar()
      },
      methods: {
        drawBar ({
          textTitle = '',
          nameTitle = '',
          xName = '',
          yName = '',
          nameArray = [],
          dataArray = [],
          colorArray = [],
          barWidth = '30%',
          showTopVal = false,
          xAxis = [
            {
              name: yName,
              type: 'category',
              data: nameArray,
              nameLocation: 'end',
              axisTick: {
                show: false
              },
              splitLine: {
                show: false // 去除网格线
              },
              axisLabel: {
                interval: 1,
                formatter: function (value) {
                  let str = ''
                  let num = 7 // 每行显示字数
                  let valLength = value.length // 该项x轴字数
                  let rowNum = Math.ceil(valLength / num) // 行数
    
                  if (rowNum > 1) {
                    for (let i = 0; i < rowNum; i++) {
                      let temp = ''
                      let start = i * num
                      let end = start + num
    
                      temp = value.substring(start, end) + '\n'
                      str += temp
                    }
                    return str
                  } else {
                    return value
                  }
                }
              },
              nameTextStyle: {
                padding: [30, 0, 0, -30]
              }
            }
          ],
          dataZoom = [],
          grid = {
            left: 20,
            right: 20,
            bottom: 20,
            top: 80,
            containLabel: true
          }
        } = {}) {
          let barBox = echarts.init(document.getElementById('bar'))
          let option = {
            title: {
              text: textTitle,
              left: 'center',
              top: 10,
              textStyle: {
                color: '#333',
                fontSize: '18',
                fontWeight: 'bolder'
              }
            },
            grid: grid,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            dataZoom: dataZoom,
            xAxis: xAxis,
            yAxis: [
              {
                axisLine: { show: false },
                name: xName,
                type: 'value'
                // axisLabel: {
                //   formatter: value => (value + '元')
                // }
              }
            ],
            series: [
              {
                name: nameTitle,
                type: 'bar',
                barWidth: barWidth,
                data: dataArray,
                label: {
                  show: showTopVal, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: '#333333',
                    fontSize: 12
                  }
                },
                itemStyle: {
                  normal: {
                    color: function (params) {
                      const colorList = colorArray
                      return colorArray.length > 0 ? colorList[params.dataIndex] : '#EA8187'
                    }
                  }
                }
              }
            ]
          }
          barBox.setOption(option, true)
        }
      }
    }
    </script>
    
    

    使用

    <template>
          <div>
           <--宽度,高度-->
            <bar :get-data="objectData" id="barId" style="height: 250px"></bar >
          </div>
    </template>
    <script>
    import Bar from '@/components/bar'
    
    export default {
      components: {
        Bar
      },
       data ()  {
    	   return {
    	       objectData: {
    			       	textTitle: '',
    			        nameTitle: '',
    			        nameArray: [],
    			        dataArray: [],
    			        colorArray: []
         		 }
    	  	 }
         }
    </script>
    
    展开全文
  • vue中实现 echarts柱状图 Y轴渐变色

    千次阅读 2019-04-25 17:29:31
    vue中实现echarts柱状图Y轴渐变色在vue中实现echarts柱状图渐变色一:安装二: 创建图表全局引入最终结果 在vue中实现echarts柱状图渐变色 一:安装 1. 首先需要安装echarts依赖包 npm install echarts -S 2. 或者...
  • 1.首先定义一个子组件.vue文件 <template> <div> <div style="width: 500px; height: 500px" ref="chart"></div> </div> </template> <script> const echarts = ...
  • 此文章讲解 Echartsvue 开发中的使用方式以及实现效果的 demo (Echarts 柱状图横向排版颜色渐变效果)示例展示; 如有疑问或者不清楚的欢迎随时提问 。 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有...
  • vue 引入Echarts

    千次阅读 2019-07-18 19:05:28
    vue 引入Echarts(1)下载Echarts(2)全局引入Echarts(3)创建一个图表 (1)下载Echarts WebStorm打开创建好的vue项目,接下来,打开cmd,下载Echarts: npm install echarts -S (2)全局引入Echarts 在/src/...
  • Vue.prototype.$echarts = echarts 3.创建一个vue页面 <template> <DIV> <el-card id="main" style="width:32.5%;height:1.7rem;"></el-card> </DIV> </template&
  • // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.模版引入柱形(此处为模版演示)圆环在下面介绍怎么更改 export default { name: 'hello', data...
  • 这里写目录标题tooltipMixin.jstest.vue三级目录 tooltipMixin.js require('echarts/lib/chart/bar') // 引入提示框和标题组件 require('echarts/lib/component/tooltip') require('echarts/lib/component/title') ...
  • vue引入echarts图表根据接口请求获取数据 下载echarts npm i echarts -S main.js引入echarts Vue.use(echarts); Vue.prototype.$echarts = echarts; 1.html 命名id 在带有id的盒子上进行绘制图表 <div class=...
  • 在main.js中引入echarts import echarts from ‘echarts’ Vue.prototype.$echarts = echarts 创建板块 <div class="echartsLeft1 echart"> <div class="HelloWorld echart-box" id="myChart1" >&...
  • vue开发:vue引入echarts

    千次阅读 2017-11-05 00:43:54
    安装echarts依赖 npm install echarts -S1 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org1 使用 cnpm install echarts -S1 ...// 引入echarts imp
  • vue-echarts--混色柱状图

    千次阅读 2018-08-04 14:10:21
    本文简单介绍如何使用vue-echarts画出多种颜色的柱状图: 搭建vue-cli 脚手架 安装vue-echarts依赖 引入vue-echarts 绘制图表 搭建vue-cli 脚手架 1.安装 vue(推荐使用淘宝镜像cnpm替换npm进行安装) ...
  • vue 引入 echarts 图表

    2019-07-25 09:25:00
    1:npm install echarts --...import echarts from 'echarts/lib/echarts'// 引入提示框组件、标题组件、工具箱组件。import 'echarts/lib/component/tooltip'import 'echarts/lib/component/title'import 'echarts...
  • 什么是EChartsEcharts 商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库...有折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图...
  • 安装echarts插件: ...接下来创建放置柱状图的容器: <div id='chart' style="width:100%;height:300px"></div> JS mounted方法中执行初始化echart的方法(这里我加了一个延时方法确保..

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,225
精华内容 490
关键字:

vue引入echarts柱状图

vue 订阅