vue中echarts,VueQuillEditor的下载和使用

一、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',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#E9EEF3'
          }
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          boundaryGap: false
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ]
    }
  }
},
 created () {
  this.zx()
},
methods: {
async zx(){
  const res= await zx()
  console.log(res.result)
  var myChart = echarts.init(document.getElementById('main'))
  const resu = _.merge(res.result, this.options)
  //lodash插件进行拼接options
  myChart.setOption(resu)
}
}
}

</script>

若要深入研究的话可以去官网：https://echarts.apache.org/zh/download.html

二、,VueQuillEditor（富文本编辑器）

1、安装：npm install vue-quill-editor --save
2、引入：

import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor, /* { default global options } */)

3、使用方式

html
<quill-editor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
        >
        
工具栏是可以自己定义的：
javascript:
editorOption: {
        scrollingContainer: '#editorcontainer',
        placeholder: '',
        // or 'bubble'
        theme: 'snow',
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            // 工具栏
            container: toolbarOptions.toolbarOptions,
            handlers: {
              'image': function (value) {
                if (value) {
                  
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
      ```
    总结：其实这些都是ctrl +c 的操作，主要是里面细节的修改，没啥太大的难度。要研究的话还是要看官网Api的！