//?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入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。