echarts 不显示标题_vue-echarts设置了title不显示

使用vue-echarts船舰的图标组件,图可以显示,标题不显示是怎么回事,官方的例子

import 'echarts/lib/chart/line'

// import 'echarts/lib/component/polar'

export default {

data(){

return{

datas:{

title: {

left: 'center',

text: '折线图',

},

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

},

yAxis: {

type: 'value'

},

series: [{

data: [820, 932, 901, 934, 1290, 1330, 1320],

type: 'line'

}]

}

}

}

}

vue-echarts的引用放在main.js

里面了

import Echarts from 'vue-echarts'

import 'echarts/lib/chart/bar'

import 'echarts/lib/component/tooltip'

Vue.component('v-chart',Echarts)

vue-cli3创建的,vue.config.js也配置了。

效果图:

标题不显示,是哪里有错误?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现 Vue 中高德地图搭配 Echarts 迁徙图的步骤如下: 1. 安装依赖 ``` npm install echarts vue-echarts vue-amap --save ``` 2. 在 main.js 中引入依赖 ```javascript import Vue from 'vue' import VueAMap from 'vue-amap' import ECharts from 'vue-echarts' // 引入 ECharts 主题和扩展模块 import 'echarts/lib/chart/map' import 'echarts/lib/chart/effectScatter' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/title' import 'echarts/lib/component/legend' // 注册 ECharts 组件 Vue.component('v-chart', ECharts) // 初始化高德地图插件 Vue.use(VueAMap) VueAMap.initAMapApiLoader({ key: '你的高德地图 api key', plugin: ['AMap.DragRoute'] }) ``` 3. 在组件中使用 ```vue <template> <div> <v-chart class="chart" :options="options" /> </div> </template> <script> export default { data() { return { options: { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', top: 'bottom', left: 'right', data: ['流入', '流出'] }, series: [ { name: '迁徙', type: 'lines', zlevel: 1, effect: { show: true, period: 6, trailLength: 0.7, color: '#fff', symbolSize: 3 }, lineStyle: { normal: { color: '#a6c84c', width: 0, curveness: 0.2 } }, data: [ { fromName: '北京', toName: '上海', coords: [ [116.407394, 39.904211], [121.473662, 31.230372] ] }, { fromName: '北京', toName: '广州', coords: [ [116.407394, 39.904211], [113.280637, 23.125178] ] } ] }, { name: '流入', type: 'map', mapType: 'china', roam: false, label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { borderWidth: 0.5, borderColor: '#009fe8', areaColor: '#fff' }, emphasis: { areaColor: '#009fe8' } }, data: [ { name: '北京', value: 100 }, { name: '上海', value: 200 }, { name: '广州', value: 300 } ] }, { name: '流出', type: 'map', mapType: 'china', roam: false, label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { borderWidth: 0.5, borderColor: '#009fe8', areaColor: '#fff' }, emphasis: { areaColor: '#009fe8' } }, data: [ { name: '北京', value: 50 }, { name: '上海', value: 100 }, { name: '广州', value: 150 } ] } ] } } } } </script> ``` 以上代码实现了一个简单的迁徙图,其中 `fromName` 和 `toName` 表示迁徙的起点和终点,`coords` 表示起点和终点的经纬度。`flowIn` 和 `flowOut` 表示流入和流出的数据,可以根据实际需求进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值