vue图表ehchart和富文本编辑器的使用

vue图表我们用echart

$ npm install echarts --save
在你要用的XX.vue中引用
import echarts from "echarts"
html：

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

      data:<input type="text" v-model="chartData_data">
      nav:<input type="text" v-model="chartData_nav">
      <button @click="chartAdd">增加</button>
    </div>

js：

import echarts from "echarts"
export default {
  name: 'Test',
  data () {
    return{
      chartData_data:'',
      chartData_nav:'',
      chartData:{
        data:[23,34,12,6,78,45,90],
        nav:['a','b','c','d','e','f','g']
      }
    }
  },
  mounted: function () {
    this.initChart();
  },
   methods: {
     chartAdd:function () {
       this.chartData.data.push(this.chartData_data);
       this.chartData.nav.push(this.chartData_nav);
       this.initChart();
     },
     initChart() {
       this.chart = echarts.init(document.getElementById('myEchart'));
       // 把配置和数据放这里
       this.chart.setOption({
         color: ['#3398DB'],
         tooltip: {
           trigger: 'axis',
           axisPointer: { // 坐标轴指示器，坐标轴触发有效
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
           }
         },
         grid: {
           left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true
         },
         xAxis: [{
           type: 'category',
           data: this.chartData.nav,
           axisTick: {
             alignWithLabel: true
           }
         }],
         yAxis: [{
           type: 'value'
         }],
         series: [{
           name: '直接访问',
           type: 'bar',
           barWidth: '60%',
           data:  this.chartData.data
         }]
       })
     }
   }

}

image.png

你还可以动态添加数据

vue富文本编辑器我们用vue-quill-editor

$ npm install vue-quill-editor --save
在main.js中引入

import vueQuillEditor from "vue-quill-editor"
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(vueQuillEditor);

html:

 <div class="editCOn">
     <quill-editor  @blur="onEditorBlur($event)">

     </quill-editor>
   </div>

js:

export default {
  name: 'Test',
  data () {
    return{
    }
  },
   methods: {
     onEditorBlur:function (e) {
       console.log('editor change!', e);
       console.log(e.container.innerHTML);//一大推东西，你也可以输出e，看看里面的结构
   }

}

image.png

颜色，字体大小什么的都能用