vue中echarts,VueQuillEditor的下载和使用

最新推荐文章于 2024-08-09 07:00:42 发布

z逍遥

最新推荐文章于 2024-08-09 07:00:42 发布

阅读量687

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/zyq51/article/details/108587457

版权

本文介绍了如何在Vue项目中安装和使用ECharts进行数据可视化，以及集成VueQuillEditor作为富文本编辑器。ECharts的安装通过npm install echarts -S完成，接着在Vue组件中引入并展示一个简单的折线图实例。对于VueQuillEditor，同样通过npm安装，然后在组件中引入并应用到项目中。

摘要由CSDN通过智能技术生成

一、echarts

1、安装：npm install echarts -S
2、引入：

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

3、简单的案例（结合axios的使用）
折线图
在这里插入图片描述

html

<template>
  <div class="sj">
     <el-card>
      <!-- 2.为Echarts准备一个Dom -->
      <div id="main" style="width: 750px;height:400px;"></div>
  </el-card>
  </div>
</template>

javscript

import echarts from 'echarts'
import _ from 'lodash'
import {zx} from "../../http/api"
export default {
data () {
  return {
    // 需要合并的数据
    options: {
      title: {
        text: '用户来源'
      },
      tooltip: {
        trigger: 'axis',