刚创建的项目,基础 js 模板,然后引入了 插件市场的 echarts插件,下面是按 插件教程 写的,然后h5正常运行绘制
编译到小程序中报错,已上传附件
**
14:20:53.853 [vite]: Rollup failed to resolve import "tslib" from "/Users/huangruichang/Documents/code/uniapp/test/node_modules/echarts/lib/core/echarts.js".
14:20:53.857 This is most likely unintended because it can break your application at runtime.
14:20:53.858 If you do want to externalize this module explicitly add it to
14:20:53.869 build.rollupOptions.external
**
<template>
<view class="content">
<view><l-echart ref="chart" @finished="init"></l-echart></view>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
// 方式一:自定义包
// 使用插件内提供的echarts.min
// 或在官网自定义包:https://echarts.apache.org/zh/builder.html
// import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
// // 方式二:全量包
// // 如果你使用 npm 安装了 echarts
// import * as echarts from 'echarts'
// 方式三:按需引入
// 按需引入 开始
import * as echarts from 'echarts/core';
import {
LineChart,
BarChart
} from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent
} from 'echarts/components';
// 标签自动布局,全局过渡动画等特性
import {
LabelLayout,
UniversalTransition
} from 'echarts/features';
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 是必须的一步
import {
CanvasRenderer
} from 'echarts/renderers';
// 按需引入 注册必须的组件
echarts.use([
LegendComponent,
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LineChart,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
//-------------按需引入结束------------------------
export default {
data() {
return {
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
confine: true
},
legend: {
data: ['热度', '正面', '负面']
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: '#999999'
}
},
axisLabel: {
color: '#666666'
}
}],
yAxis: [{
type: 'category',
axisTick: {
show: false
},
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
axisLine: {
lineStyle: {
color: '#999999'
}
},
axisLabel: {
color: '#666666'
}
}],
series: [{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310],
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220]
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-20, -32, -21, -34, -90, -130, -110]
}
]
},
};
},
// 组件能被调用必须是组件的节点已经被渲染到页面上
// 1、在页面mounted里调用,有时候mounted 组件也未必渲染完成
mounted() {
// init(echarts, theme?:string, opts?:{}, chart => {})
// echarts 必填, 非nvue必填,nvue不用填
// theme 可选,应用的主题,目前只支持名称,如:'dark'
// opts = { // 可选
// locale?: string // 从 `5.0.0` 开始支持
// }
// chart => {} , callback 返回图表实例
this.$refs.chart.init(echarts, chart => {
chart.setOption(this.option);
});
},
// 2、或者使用组件的finished事件里调用
methods: {
async init() {
// chart 图表实例不能存在data里
const chart = await this.$refs.chart.init(echarts);
chart.setOption(this.option)
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>