Vue 使用图表插件 -- Echarts

最新推荐文章于 2024-09-09 08:23:09 发布

gqzydh

最新推荐文章于 2024-09-09 08:23:09 发布

阅读量1.9w

点赞数 6

分类专栏： Vue.js 文章标签： vue echarts

本文链接：https://blog.csdn.net/gqzydh/article/details/81126181

版权

Vue.js 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

目前常用的图表插件有：
charts
Echarts
highcharts
d3.js
这次根据Vue 项目中 Echarts 的应用记一笔。

安装插件

npm install echarts -S

使用npm 安装 Echarts，安装成功后，可在项目package.json 文件中查看到

然后在项目的入口js文件 main.js中添加

import echarts from 'echarts'

模板中创建所需的Demo

这里写图片描述

<!-- ECharts图表测试 -->
<template>
    <!-- 图表 -->
    <div class="vol-data">
      <div class="charts" style="width:'100%',height:'6.54rem'">
        <div class="charts-title">
          24小时内最高：99.99
        </div>
        <div id="myChart" :style="{width:'100%',height:'300px'}">
        </div>
      </div>
    </div>
<template>

<script>
import echarts from 'echarts'
export default {
  name: 'Bank',
  data () {
    return {
    }
  },
  mounted () {
    /*ECharts图表*/
    var myChart = echarts.init(document.getElementById('myChart'));
    myChart.setOption({
      xAxis: {
       type: 'category',
       data: ['0', '6H', '9H', '12H', '15H', '18H', '24H']
       },
       yAxis: {
           type: 'value'
       },
       series: [{
           data: [1, 3, 4, 7, 4, 6, 9],
           type: 'line'
      }]
     })

  },
  methods:{
  }
}
</script>

eCharts中的事件

ECharts 支持常规的鼠标事件类型，包括 ‘click’、’dblclick’、’mousedown’、’mousemove’、’mouseup’、’mouseover’、’mouseout’ 事件。

// 基于准备好的demo，初始化ECharts实例
var myChart = echarts.init(document.getElementById(‘main’));

指定图表的配置项和数据

var option = {
 xAxis: {
  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
 },
 yAxis: {},
 series: [{
  name: '销量',
  type: 'bar',
  data: [5, 20, 36, 10, 10, 20]
 }]
};