echarts的使用, echarts配置项

一. echarts的使用(vue文件中)

如果你想简单使用echarts, 可以访问echarts官网来安装echarts

1. 安装echarts(vue项目中)

npm install echarts --save

2. 引入echarts

import * as echarts from ‘echarts’;

3. 准备容器(这个容器必须得给宽高噢)

<div ref="myEchart" class="box" style="width: 400px;height: 300px"></div>

4. 创建echarts实例，添加配置项

echarts实例是基于准备好的DOM去创建的，所以需要获取DOM元素噢

const myEcharts = echarts.init(this.$refs.myEchart)
const options = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
myEcharts.setOption(options)

完整代码

首先，确保你的vue项目已经安装了echarts

<template>
  <div id="app">
    <!-- 准备容器 -->
    <div ref="myEchart" class="box" style="width: 400px;height: 300px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  methods: {
    init () {
      // 创建echarts实例 
      const myEcharts = echarts.init(this.$refs.myEchart)
      // 配置项
      const options = {
        // 标题(textStyle可以设置文本样式噢)
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        // 提示文本(触发时机: 鼠标悬停在每一项上)
        tooltip: {
          trigger: 'item'
        },
        // 用来解释图表每一项对应的内容
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        // 数据源和当前显示图表的类型
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      // 添加配置项
      myEcharts.setOption(options)
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style>
</style>

当然如果你需要其他图形模板，echarts官网也提供了很多，只需要修改options配置项就ok啦，echarts模板

二. echarts配置项

1. 首先，列举一下最外层的配置项

title 标题
tooltip 提示文本(弹出框)
legend 标签
series 图形类型和数据源
grid 图形与容器的距离
以上配置项是每一种类型的图形都有的(xAxis,yAxis是折线图，柱状图所特有的，饼图并没有)
xAxis x轴信息
yAxis y轴信息(不给信息，也会默认填充)

2. 在详细分别声明一下

- title 标题

text 图表标题
left ‘left’(默认) | ‘center’ | ‘right’ 设置标题的对齐方式
subtext 标题下面文本
textStyle 文本样式(fontSize, color, fontWeight…)

- tooltip 提示框(文本)

trigger ‘item’(放在每一项上时) | ‘axis’(在一列区域内，多用于折线图和柱状图) 提示文本触发时机
borderColor,borderWidth, backgroundColor 用于设置弹出框样式
textStyle 文本样式
confine false(默认) | true 设置为true时,确保提示文本可见不会溢出容器, 特别是在图表右侧时，提示文本可能放不下
formatter (params) => { return ‘提示文本’ } 格式化显示文本,params(name(列名), value(列值), data(提供的数据))

- legend 标签

orient 'vertical’垂直 | ‘horizontal’(默认) 水平
left ‘left’ | ‘center’ | ‘right’ | number 水平对齐方式
top ‘top’(默认) | ‘middle’ | ‘bottom’ 垂直对齐方式
itemWidth 标签宽度
itemHeight 标签高度
textStyle 文本样式