echarts一个页面有多个tooltip_可视化工具ECharts入门
//?1.導入echarts
import?echarts?from?'echarts'
?<div?id="main"?style="width:600px;height:400px;">div>
??//此時頁面上的元素已經被渲染完畢了
????mounted()?{
????//?3.基于準備好的dom,初始化echarts實例
????var?myChart?=?echarts.init(document.getElementById('main'))
????//?4.準備數據和配置項
????//?指定圖表的配置項和數據
????????var?option?=?{
????????????title:?{
????????????????text:?'ECharts?入門示例'
????????????},
????????????tooltip:?{},
????????????legend:?{
????????????????data:['銷量']
????????????},
????????????xAxis:?{
????????????????data:?["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
????????????},
????????????yAxis:?{},
????????????series:?[{
????????????????name:?'銷量',
????????????????type:?'bar',
????????????????data:?[5,?20,?36,?10,?10,?20]
????????????}]
????????};
????????//?5.展示數據
????????myChart.setOption(option)
<template>
????<div>
????<el-breadcrumb?separator-class="el-icon-arrow-right">
??????<el-breadcrumb-item?:to="{?path:?'/home'?}">首頁el-breadcrumb-item>
??????<el-breadcrumb-item>動畫el-breadcrumb-item>
??????<el-breadcrumb-item>番劇el-breadcrumb-item>
????el-breadcrumb>
????<el-card>
???????<div?id="main"?style="width:600px;height:400px;">div>
????el-card>
????div>
template>
<script>
//?1.導入echarts
import?echarts?from?'echarts'
export?default?{
????date()?{
????????return{
????????}
????},
????created()?{
????},
????//此時頁面上的元素已經被渲染完畢了
????mounted()?{
????//?3.基于準備好的dom,初始化echarts實例
????var?myChart?=?echarts.init(document.getElementById('main'))
????//?4.準備數據和配置項
????//?指定圖表的配置項和數據
????????var?option?=?{
????????????title:?{
????????????????text:?'ECharts?入門示例'
????????????},
????????????tooltip:?{},
????????????legend:?{
????????????????data:['銷量']
????????????},
????????????xAxis:?{
????????????????data:?["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
????????????},
????????????yAxis:?{},
????????????series:?[{
????????????????name:?'銷量',
????????????????type:?'bar',
????????????????data:?[5,?20,?36,?10,?10,?20]
????????????}]
????????};
????????//?5.展示數據
????????myChart.setOption(option)
????},
????methods:{
????}
}
script>
<style?lang="less"?scoped>
style>
總結
以上是生活随笔為你收集整理的echarts一个页面有多个tooltip_可视化工具ECharts入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql slave 线程 简书_My
- 下一篇： 查看redis缓存大小_一个 bug 引