vue富文本的使用、js中使用echarts

Vue中富文本的实现

// 富文本编辑器，可单独封装一个富文本组件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// eslint-disable-next-line no-unused-vars
import { quillEditor } from 'vue-quill-editor'

// 挂在一下
components: { quillEditor },

// 在页面上使用v-model绑定
<quillEditor></quillEditor>

 <div id="chartmain"></div>
<script type="text/javascript">
window.onload = function (){
		//指定图表的配置项和数据
		option = {
				//标题	
			    title: {
			        text: '基础雷达图'
			    },
			    tooltip: {},
			    legend: {
			        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
			    },
			    radar: {
			        // shape: 'circle',
			        name: {
			            textStyle: {
			                color: '#fff',
			                backgroundColor: '#999',
			                borderRadius: 3,
			                padding: [3, 5]
			           }
			        },
			        indicator: [
			           { name: '销售（sales）', max: 6500},
			           { name: '管理（Administration）', max: 16000},
			           { name: '信息技术（Information Techology）', max: 30000},
			           { name: '客服（Customer Support）', max: 38000},
			           { name: '研发（Development）', max: 52000},
			           { name: '市场（Marketing）', max: 25000}
			        ]
			    },
			    series: [{
			        name: '预算 vs 开销（Budget vs spending）',
			        type: 'radar',
			        // areaStyle: {normal: {}},
			        data : [
			            {
			                value : [4300, 10000, 28000, 35000, 50000, 19000],
			                name : '预算分配（Allocated Budget）'
			            },
			             {
			                value : [5000, 14000, 28000, 31000, 42000, 21000],
			                name : '实际开销（Actual Spending）'
			            }
			        ]
			    }]
			};
			//获取dom容器
			var myChart = echarts.init(document.getElementById('chartmain'));
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
}
</script>