初识Echarts

安装echarts

npm install echarts --save

在mian.js中引入(全局引入)

import * as echarts from "echarts"
Vue.prototype.$echarts = echarts

开始使用echarts

1. 定义有宽度和高度的父容器
2. 初始化echarts实例
3. 指定配置项和数据
4. 将配置项设置给echarts实例对象 绘制图表

1. 定义有宽度和高度的父容器
<div id="main" class="main_container"></div>

2. 初始化echarts实例
var mycharts = this.$echarts.init(document.getElementById("main"))

3. 指定配置项和数据
const option={
   }

4. 将配置项设置给echarts实例对象 绘制图表
mycharts.setOption(option)

基础配置(摘抄自黑马教程)

• series
  • 系列列表 , 每个系列通过type决定自己的图标类型 , 可以指定图标数据 , 可以多个图标重叠
• xAxis
  • boundaryGap: 坐标轴两边的留白策略true , 这时候刻度只是作为分割线 , 标签和数据点都会在两个刻度之间的带(band)中间
• yAxis : 直角 grid 中的 y 轴
  -grid : 直角坐标系内绘图网络
• title : 标题组件
  -tooltip : 提示框组件
  -legend : 图例组件
• color : 调色盘颜色列表
  数据堆叠 , 同个类目轴上系列配置相同的stack值后 , 后一个系列的值会在前一个系列的值上相加

/* 设置配置项 */
    const option = {
   
      /* color设置我们的线条的颜色 , 注意后面是一个数组 */
      color:['red','green'],
      /* 标题 */
      title: {
   
        text: "Temperature Change",
      },
      /* 图表的提示框组件 */
      tooltip: {
   
        /* 触发方式 , 折线图是axis , 柱状图是item */
        trigger: "axis",