vue图表用echart
$ npm install echarts --save
在你要用的XX.vue中引用
import echarts from “echarts”
<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
}]
})
}
}
}
还可以动态添加数据
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);
export default {
name: 'Test',
data () {
return{
}
},
methods: {
onEditorBlur:function (e) {
console.log('editor change!', e);
console.log(e.container.innerHTML);//一大推东西,你也可以输出e,看看里面的结构
}
}
<div class
="editCOn">
<quill-editor @blur="onEditorBlur($event)">
</quill-editor>
</div>
颜色,字体大小什么的都能用