精华内容
下载资源
问答
  • 之前在js直接引用echarts可以正常使用, 下面的图是我之前做的但是用了vue之后, 布局全乱了, 调也调不了htmljsexport default {mounted() {/* 统计柱状图 */var myChart = echarts.init(document.getElementById(...

    之前在js直接引用echarts可以正常使用, 下面的图是我之前做的

    863825a62cd9e7f7f68e77f9291befa3.png

    但是用了vue之后, 布局全乱了, 调也调不了

    f6045c18625eec46c5dd5e82fe0a466d.png

    html

    7007de932972f49f33515b7cb9ab575c.png

    js

    export default {

    mounted() {

    /* 统计柱状图 */

    var myChart = echarts.init(document.getElementById("main"));

    // 指定图表的配置项和数据

    var statistics = {

    title: {

    text: "面积",

    textStyle: {

    fontWeight: "normal",

    color: "#fff", // 标题颜色

    fontSize: 14

    },

    left: "center"

    },

    tooltip: {

    // 鼠标移动柱状图是提示文字

    show: true

    },

    legend: {

    // data: ['面积'],

    textStyle: {

    fontSize: 12

    }

    },

    // 横坐标

    xAxis: {

    data: ["灌木", "森林", "森林", "树木", "小树", "大树", "红树"],

    axisLabel: {

    show: true,

    textStyle: {

    color: "#fff"

    }

    },

    axisLine: {

    lineStyle: {

    color: "#094060"

    }

    }

    },

    // 纵坐标

    yAxis: {

    // 设置坐标轴字体颜色

    axisLine: {

    lineStyle: {

    color: "#094060"

    }

    },

    axisLabel: {

    show: true,

    textStyle: {

    color: "#fff"

    }

    },

    splitLine: {

    lineStyle: {

    color: ["#07405c"]

    }

    }

    },

    //配置样式

    itemStyle: {

    color: '#06ae7c',

    //鼠标悬停时:

    emphasis: {

    shadowBlur: 10,

    shadowOffsetX: 0,

    shadowColor: "rgba(0, 0, 0, 0.5)"

    }

    },

    series: [

    {

    type: "bar",

    barWidth: 50, // 设置柱的宽度

    data: [38, 23, 35, 12, 26, 8, 36]

    }

    ]

    };

    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(statistics);

    }

    }

    展开全文
  • 使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据,下面是使用Echarts柱状图来展示对应数据的实例。ee05abaf9633184a9c012631b642d970.png使用npm安装Echartsnpm install echarts --save在man.js中...

    使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据,下面是使用Echarts柱状图来展示对应数据的实例。

    ee05abaf9633184a9c012631b642d970.png

    使用npm安装Echarts

    npm install echarts --save

    在man.js中引入对应的echarts

    import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue

    /* 引入echarts工具 */

    import 'echarts/lib/component/tooltip'

    import 'echarts/lib/component/title'

    import 'echarts/lib/component/legend'

    在vue文件下的编写

    data() {

    return {

    optionTrend: {

    color: ['#2860fc'],

    tooltip: {

    trigger: 'axis',

    axisPointer: { // 坐标轴指示器,坐标轴触发有效

    type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'|'none'

    }

    },

    title: {

    text: '金额数量',

    top: '15',

    left: '-3',

    textStyle:{

    fontSize: 14, //字体大小

    color: '#666666', //字体颜色

    fontWeight: '500'

    },

    },

    grid: {

    left: '-27',

    right: '4',

    bottom: '0%',

    containLabel: true

    },

    xAxis: [ {

    type: 'category',

    data: ['0-5K', '5K-3W', '3W-5W', '5W-10W', '10W以上',],

    axisLine: { // 改变x轴颜色

    lineStyle: {

    color: '#c1c1c1',

    width: '1',

    }

    },

    axisLabel: { // 改变x轴字体颜色和大小

    textStyle: {

    color: "#666666",

    fontSize: 12,

    },

    },

    } ],

    yAxis: [ {

    type: 'value',

    axisTick: 'none', // 右边轴样式的显示

    axisLine: 'none', // 右边轴样式的显示

    // 修改网格的颜色

    splitLine: {

    show: true,

    lineStyle: {

    type: 'solid',

    color: '#f5f5f5'

    }

    },

    } ],

    series: [ {

    name: '',

    type: 'bar',

    barWidth: '50%',

    data: [10, 52, 200, 334, 390,]

    } ]

    },

    }

    },

    beforeDestroy() {

    window.removeEventListener("resize", this.resizeTheChart);

    },

    mounted(){

    window.addEventListener("resize", this.resizeTheChart);

    },

    methods:{

    resizeTheChart() {

    if (this.$refs.TrendChart) {

    this.$refs.TrendChart.resize();

    }

    },

    27c1eac97e42e440849ac938a0bc4574.png

    应为上面已经贴过template、beforeDestroy、mounted和methods里面的代码了这里只贴对应options里面的代码

    dataRecordOptions: {

    grid: {

    left: '40',

    right: '20',

    bottom: '30',

    top: '30',

    },

    tooltip : {

    trigger: 'axis',

    axisPointer: {

    type: 'none', // 中间横线

    },

    },

    xAxis: {

    data: ['数字身份','存证','数据报送','电子合同',],

    axisLine: 'none',

    axisLabel: {

    color: '#fff',

    fontSize: 12,

    fontWeight: 500,

    }

    },

    yAxis: {

    type : 'value',

    axisLabel: {

    textStyle: {

    fontSize: 12, //字体大小

    color: '#137cf2', //字体颜色

    },

    formatter: function (value, index) {

    if (value >= 10000 && value < 10000000) {

    value = value / 10000 + "万";

    } else if (value >= 10000000 && value < 100000000) {

    value = value / 10000000 + "千万";

    } else if (value >= 100000000) {

    value = value / 100000000 + "亿";

    }

    return value;

    }

    },

    splitLine: {

    show:true,

    lineStyle: {

    color: '#737f8d',

    type: 'dashed', // 背景为虚线

    }

    },

    axisTick: 'none', // 右边轴样式的显示

    axisLine: 'none', // 右边轴样式的显示

    },

    series: [{

    type: 'bar',

    barWidth: 30,

    smooth:false,

    itemStyle:{

    normal: {

    color: function(params) {

    var colorList = ['#137cf2','#f89009','#f8d909','#01cc78',];

    var colorListr = ['#137cf2','#f8d909','#f89009','#5e00a6',];

    return colorListr[params.dataIndex]

    },

    },

    },

    label: {

    normal: {

    show: true,

    fontSize: 12,

    fontWeight: '500',

    color: '#ffffff',

    position: 'top',

    }

    },

    data: [10000,12000,8000,14000],

    }],

    }

    展开全文
  • 一. 下载echartsnpm install ...在main.js里引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts三.在vue组件中的使用<template> <div> <div>乡镇环保指数概况div> &l...

    一. 下载echarts

    npm install echarts --save

    二.在main.js里引入echarts

    import echarts from 'echarts'Vue.prototype.$echarts = echarts

    三.在vue组件中的使用

    <template>  <div>   <div>乡镇环保指数概况div>    <div id="myChart" :style="{width: '400px', height: '400px'}">div>  div>template><script type="text/ecmascript-6">export default { methods:{  drawLine(){   // 基于准备好的dom,初始化echarts实例    let myChart = this.$echarts.init(document.getElementById('myChart'))    let that = this     // 绘制图表     myChart.setOption({       color: ['#3B93F7''#7BD7B5'],       legend: {data: ['平邑开发区''平邑检测站']},        xAxis: [{            data: ['PM2.5''PM10''SO2''NO2''O3']               }],         yAxis: [{               min:0,               max:100                }],         series: [{            name'平邑开发区',            type'bar',            barGap0,            data: [203213460],            itemStyle: {                 normal: {                   colorfunction(params{                      let colorList = [  // 存放柱状图渐变色的数组可以是多个                             ['#1f6cf6''#409af7'],                           ];                    let index = params.dataIndex % colorList.length;                          // 如果是纵向渐变色的图标,则改为0, 0 , 0, 1                          //如果是横向的渐变色图标,则改为1, 0 , 0, 0                     return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [                            { offset: 0, color: colorList[index][0] },                            { offset: 1, color: colorList[index][1] }                          ]);                          },                        barBorderRadius: 2 //柱状角成椭圆形                         }                        }                    },                      {                        name'平邑检测站',                          type: 'bar',                          data: [20, 82, 91, 44, 90],                          itemStyle: {                                normal: {                                  color: function(params) {                                    var colorList = [                                      ['#50b398', '#89e3be'],                                    ];                                      var index = params.dataIndex % colorList.length;                                    // 如果是纵向的图标,则改为0, 0 , 0, 1                                    return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [                                      { offset: 0, color: colorList[index][0] },                                      { offset: 1, color: colorList[index][1] }                                    ]);                                  },                                  barBorderRadius: 2 //柱状角成椭圆形                                }                          }                      },                  ]            });        }    },    mounted(){       this.drawLine();    }  }script><style scoped>style>

    四.实现的效果展示

    c968098893229b12802002754b779818.png

    展开全文
  • 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. 或者...
  • Vue.prototype.$echarts = echarts 3.创建一个vue页面 <template> <DIV> <el-card id="main" style="width:32.5%;height:1.7rem;"></el-card> </DIV> </template&
  • 这里写目录标题tooltipMixin.jstest.vue三级目录 tooltipMixin.js require('echarts/lib/chart/bar') // 引入提示框和标题组件 require('echarts/lib/component/tooltip') require('echarts/lib/component/title') ...
  • main.js需引入echarts,main.js 代码:// 引入echartsimport echarts from 'echarts'// 引入后将echarts存为全局变量 $echarts 之后用的时候就使用 this.$echartsVue.prototype.$echarts = echartsecharts.vue代码:...
  • 在main.js中引入echarts import echarts from ‘echarts’ Vue.prototype.$echarts = echarts 创建板块 <div class="echartsLeft1 echart"> <div class="HelloWorld echart-box" id="myChart1" >&...
  • 在main.js中引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts在相应的vue中导入echartsimport echarts from 'echarts';实现柱状图显示mounted: function () {// 基于准备好的dom,初始化...
  • 本篇讲述在vue项目中使用ECharts柱状图,并利用双Y轴给图表添加右边框 应项目要求,UI给的设计图给图表右边添加了右边框,而echarts中大多是无右边框,或是全部加上纵轴线,显示为网格样式,因此在这想到用双Y轴实现...
  • Vue接入Echarts 显示柱状图饼图使用CLI接入npm install echarts --save1.可以全局引入(在main.js)// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts2.或者局部引入(在script)import ...
  • 前端时间在前端岗位上要实现Vue项目中的echarts画图,今天来分享下vue+echarts折线图、柱状图和扇形图的方法。每种图的echarts配置差不多一致,但根据图种需进行指定选项的改动。 一、折线图 折线图中,series要包含...
  • vue-echarts--混色柱状图

    千次阅读 2018-08-04 14:10:21
    本文简单介绍如何使用vue-echarts画出多种颜色的柱状图: 搭建vue-cli 脚手架 安装vue-echarts依赖 引入vue-echarts 绘制图表 搭建vue-cli 脚手架 1.安装 vue(推荐使用淘宝镜像cnpm替换npm进行安装) ...
  • 什么是EChartsEcharts 商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库...有折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图...
  • vue+element+echarts柱状图+列表

    千次阅读 2019-06-12 11:56:00
    前端由vue+element搭建框架,引入vue和element的index.js和css就可以写页面;...柱状图和列表: <script type="text/javascript" src="/main/common/echarts/echarts.min.js"></script&...
  • 父组件import echarts from 'echarts'import BarGraph from '../../components/bargraph.vue'export default {name: '',data () {return {opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],...
  • 在main.js中引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts在相应的vue中导入echartsimport echarts from 'echarts';实现柱状图显示mounted: function () {// 基于准备好的dom,初始化...
  • 安装和引入echarts # 安装echarts npm install echarts --save 引入Echarts #使用echarts的组件 Vue.use(echarts); #可以通过$echarts记性操作 Vue.prototype.$echarts = echarts 组件中引入echarts im
  • 需求:页面中有两个条形,通过局部导航切换查看 思路: 1、先实现条形基本的样式效果 2、创建两个子路由,将两个条形分别放进子路由中 ...安装以及在main.js引入 npm install echarts -S import ...
  • Vue接入Echarts 显示柱状图饼图使用CLI接入npm install echarts --save1.可以全局引入(在main.js)// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts2.或者局部引入(在script)import ...
  • vue引入echarts并实现echarts自适应

    千次阅读 2018-07-10 10:54:56
    vue引入echarts并实现echarts自适应 在许多项目中需要使用到柱状图、饼状图等,在本篇博客中介绍echarts的自适应。 实现echarts的自适应可以使用window.onresize(),具体操作如下: npm安装echats: npm ...
  • ECharts柱状图属性配置

    2020-05-29 19:11:19
    Vue.prototype.$echarts = echarts 这些属性是在官网看配置项外加看视频,然后一点一点去整理的。 可能不多,不过基本够用了。 let myChart1 = this.$echarts.init(document.getElementById("box")); myChart1....
  • 1. 安装echarts因为通过vue-echarts按需引入时,一些组件模块(如折线图、柱状图,提示框和标题组件等)需要依赖已经包含所有图表和组件的Echarts包,所以这里两个都需要安装:npm install echarts vue-echarts -S当然...
  • 1、首先在vue项目上安装echarts依赖 在项目根目录的命令窗口输入 npm install echarts -S 2、全局引入(main.js) import charts from 'echarts' Vue.prototype.$echarts = echarts 3、然后就是在需要显示...

空空如也

空空如也

1 2 3 4 5 6
收藏数 111
精华内容 44
关键字:

vue引入echarts柱状图

vue 订阅