当前位置：首页 > news >正文

vue引入eachrts

news 2025/7/12 11:09:28

1. 安装Echarts
使用npm

npm install echarts --save

导入Echarts插件

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
import echarts from 'echarts'

我们来做个简单的实例首先需要一个容器装下Echarts

<template><div id="list" style="width: 600px;height:400px;"></div>
</template>
mounted () {// 初始化echartsvar myChart = echarts.init(document.querySelector('#list'))// 拿到echarts图表需要的数据var option = option: {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}}]}// 使用方法引入echartsmyChart.setOption(option)}<template><div id="list" style="width: 600px;height:400px;"></div>
</template><script>
import echarts from 'echarts'
export default {name: 'dome',props: {},data () {return {option: {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}}]}}},methods: {},mounted () {var myChart = echarts.init(document.querySelector('#list'))var option = this.optionmyChart.setOption(option)}
}
</script><style scoped></style>

查看全文

http://www.lryc.cn/news/383830.html