echarts下载及使用层叠柱状图折线图案例

最新推荐文章于 2024-06-26 11:09:42 发布

工作备忘录

最新推荐文章于 2024-06-26 11:09:42 发布

阅读量491

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/yoyoyo8888/article/details/126837638

版权

下载

npm install echarts --save

main.js引入

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

echarts使用

1.准备具有宽高的容器

<div id="echartsLine"></div>

<div id="echartsBar"></div>

<style lang="less" scoped>
   #echartsLine,
   #echartsBar {
      height: 190px;
      width: 620px;
      background-color: #fff;
      border-radius: 8px;
   }
</style>

2.src新建文件夹配置options，下面是一个简单的折线图和柱状图的配置

export const optionsLine = {
  title: {
      text: '折线图',
      x: 'left',
      textStyle : {
        fontSize : 14
      },
      left:10,
      top:5
  },
  grid : { 
    top: '22%',  
    left: '3%', 
    right: '3%',
    bottom: '2%',
    containLabel: true
  },
  xAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
      type: 'category',
      data: ['陕西', '河北', '北京', '新疆', '天津', '上海', '厦门','陕西', '河北', '北京', '新疆', '天津', '上海']
    },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [0.3, 0.42, 0.62, 0.21, 0.4, 0.3, 0.5, 0.3, 0.2, 0.4, 0.35, 0.32, 0.6],
      type: 'line',
      itemStyle : {  
        normal : {  
            color:'#1994FA',  
            lineStyle:{  
                color:'#1994FA'  
            }  
        }  
      }
    }, 
  ]
}
export const optionsBar = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  title: {
    text: '层叠柱状图',
    x: 'left',
    textStyle : {
      fontSize : 14
    },
    left:10,
    top:5
},
  grid: {
    top: '22%',
    left: '3%',
    right: '3%',
    bottom: '2%',
    containLabel: true
  },
  yAxis: {
    type: 'value'
  },
  xAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    type: 'category',
    data: ['陕西', '河北', '北京', '新疆', '天津', '上海', '厦门','陕西', '河北', '北京', '新疆', '天津', '上海']
  },
  series: [
    {
      name: '待处理',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320,320, 302, 301, 334, 390, 330]
    },
    {
      name: '已处理',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230]
    },
  ]

}

3.引入配置

<script>
import { optionsLine, optionsBar} from '@/datasource/index.js'
export default {
...
}
</script>

4.methods自定义方法在mounted中初始化

以折线图为例，柱状图再复制一份改对应id名和配置名

const chartLine = document.getElementById('echartsLine');
    
const myChartLine = this.$echarts.init(chartLine);
    
myChartLine.setOption(optionsLine);

效果图