vue中使用echarts，渲染不出来！
vue中使用echarts，渲染不出来！
不知道哪里出了问题
<template>
<div class="container">
<div id="lineDemo"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'indexs',
props: {},
data() {
return {
echart: null,
}
},
methods: {
draw(id, option) {
if (this.echart) {
this.echart.dispose()
}
var chartDom = document.getElementById(id)
var myChart = echarts.init(chartDom)
this.echart = myChart
myChart.setOption(option)
myChart.on('click', (params) => {
// 判断点击的元素类型
if (params.componentType === 'series') {
// 获取点击元素的数据
console.log(params)
// 在这里可以对获取到的数据进行处理或使用
this.$emit('change', params)
}
})
},
drawEcharts(xLabels, oks, nos, psi) {
let minLength = Math.min(oks.length, nos.length)
let maxV = 0
for (let i = 0; i < minLength; i++) {
if (oks[i] + nos[i] > maxV) {
maxV = oks[i] + nos[i]
console.log('a')
console.log(maxV)
}
}
maxV = (Math.floor(maxV / 4 / 10) + 1) * 10 * 4
console.log('b')
console.log(maxV)
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
toolbox: {
// right:40,
zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
// left:"", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"5%", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"8%", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
width:"auto", //图例宽度
height:"auto",
// right:40,
feature: {
magicType: { //动态类型切换
show: true,
title:"切换", //各个类型的标题文本，可以分别配置。
type: ['line'], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
},
restore : { //配置项还原。
show: true, //是否显示该工具。
title:"还原",
},
saveAsImage: {
name:"PSI",
title:'下载图片'
}
}
},
legend: {
show: true,
top: '10%',
},
xAxis: {
type: 'category',
data: xLabels,
axisTick: {
// show: false, //隐藏刻度线
alignWithLabel: true,
},
},
grid: [
{ top: '30%', bottom: '5%' },
{ top: '0%', bottom: '70%' },
],
yAxis: [
{
type: 'value',
scale: true,
name: 'Mentions',
min: 0,
max: maxV,
interval: maxV / 4,
},
{
type: 'value',
// axisLabel: {
// formatter: "{value} 次数",
// },
scale: true,
name: 'Value',
min: -10.0,
max: 10.0,
},
],
series: [
{
name: '正面提及',
type: 'bar',
stack: 'total',
// barWidth: '6%', //---柱子宽度
label: {
show: true,
},
itemStyle: {
//---图形形状/颜色
color: '#94cc74',
},
emphasis: {
focus: 'series',
},
data: oks,
yAxisIndex: 0,
},
{
name: '负面提及',
type: 'bar',
stack: 'total',
// barWidth: '6%', //---柱子宽度
label: {
show: true,
},
itemStyle: {
//---图形形状
color: '#fac858',
},
emphasis: {
focus: 'series',
},
data: nos,
yAxisIndex: 0,
},
{
name: 'PSI',
type: 'line',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
center: ['50%', '40%'],
data: psi,
yAxisIndex: 1,
markLine: {
symbol: ['none', 'none'],
lineStyle: {
width: 1,
color: 'red',
},
data: [{ yAxis: 6 }],
},
},
],
}
},
mounted() {
this.draw('lineDemo', option);
},
},
}
</script>
<style scoped>
</style>
<template>
<div class="container">
<div id="lineDemo" style="width: 600px; height: 250px"></div>
</div>
</template>
<script>
export default {
name: 'indexs',
props: {},
data() {
return {
echart: null,
}
},
methods: {
draw(id, option) {
if (this.echart) {
this.echart.dispose()
}
let myChart = this.$echarts.init(
document.getElementById(id)
);
console.log(111)
this.echart = myChart
myChart.setOption(option)
myChart.on('click', (params) => {
// 判断点击的元素类型
if (params.componentType === 'series') {
// 获取点击元素的数据
console.log(params)
// 在这里可以对获取到的数据进行处理或使用
this.$emit('change', params)
}
})
},
drawEcharts(xLabels, oks, nos, psi) {
let minLength = Math.min(oks.length, nos.length)
let maxV = 0
for (let i = 0; i < minLength; i++) {
if (oks[i] + nos[i] > maxV) {
maxV = oks[i] + nos[i]
}
}
maxV = (Math.floor(maxV / 4 / 10) + 1) * 10 * 4
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
toolbox: {
zlevel: 0,
top: '5%',
right: '8%',
bottom: 'auto',
width: 'auto',
height: 'auto',
feature: {
magicType: {
show: true,
title: '切换',
type: ['line'],
},
restore: {
show: true,
title: '还原',
},
saveAsImage: {
name: 'PSI',
title: '下载图片',
},
},
},
legend: {
show: true,
top: '10%',
},
xAxis: {
type: 'category',
data: xLabels,
axisTick: {
alignWithLabel: true,
},
},
grid: [
{ top: '30%', bottom: '5%' },
{ top: '0%', bottom: '70%' },
],
yAxis: [
{
type: 'value',
scale: true,
name: 'Mentions',
min: 0,
max: maxV,
interval: maxV / 4,
},
{
type: 'value',
scale: true,
name: 'Value',
min: -10.0,
max: 10.0,
},
],
series: [
{
name: '正面提及',
type: 'bar',
stack: 'total',
label: {
show: true,
},
itemStyle: {
color: '#94cc74',
},
emphasis: {
focus: 'series',
},
data: oks,
yAxisIndex: 0,
},
{
name: '负面提及',
type: 'bar',
stack: 'total',
label: {
show: true,
},
itemStyle: {
color: '#fac858',
},
emphasis: {
focus: 'series',
},
data: nos,
yAxisIndex: 0,
},
{
name: 'PSI',
type: 'line',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
center: ['50%', '40%'],
data: psi,
yAxisIndex: 1,
markLine: {
symbol: ['none', 'none'],
lineStyle: {
width: 1,
color: 'red',
},
data: [{ yAxis: 6 }],
},
},
],
}
this.draw('lineDemo', option)
},
},
mounted() {
const xLabels = ['Label A', 'Label B', 'Label C', 'Label D']; // X轴标签数据
const oks = [100, 200, 150, 300]; // 正面提及数据
const nos = [80, 120, 90, 150]; // 负面提及数据
const psi = [0.5, 0.7, 0.6, 0.8]; // PSI数据
this.$nextTick(() => {
this.drawEcharts(xLabels, oks, nos, psi);
});
}
}
</script>
<style scoped>
</style>
根据这个改一下就可以了（ this.$echarts.init是因为在这里我导入echarts库并注册为Vue插件了，然后随便写了几条数据）
你的 div 写高度了吗，没高度看不到渲染
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7741298
- 这篇博客也不错, 你可以看下vue结合echarts-点击echarts图表内容，在图表上面出现一个弹框，
- 除此之外, 这篇博客: Vue中引入echarts绘制echarts图表中的 在某个组件中使用 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
<template> <div id="main" style="width: 600px;height:400px;"></div> </template><script> let echarts = require('echarts/lib/echarts') export default { name: 'app', mounted () { var myeChart=echarts.init(document.getElementById("main")) // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myeChart.setOption(option); } } </script>- 您还可以看一下 那文新老师的学生成绩信息管理以及echarts可视化统计课程中的 课程实现内容简介小节, 巩固相关知识点
- 您还可以看一下 那文新老师的学生成绩信息管理以及echarts可视化统计课程中的 课程实现内容简介小节, 巩固相关知识点